如果在一个网页中给id="mydiv"的元素添加css样式,先获取该节点:
var obj = document.getElementById("mydiv");
给节点添加css:
如果需要添加的css不多的话,可以obj.style.width = "300px";
如果需要添加多条css语句的话,这样会有多条,如:
obj.style.width="300px";
obj.style.height="300px";
obj.style.border="1px solid #ddd";
……
这样会不会显得有些麻烦,且需要重复敲写类似的语句,那么可以这样:
(1)通过自己编写js函数设置css
function setCss(obj,css){
for(var attr in css){
obj.style[attr] = css[attr];
}
}
setCss(obj,{"width":"300px","height":"300px","border":"1px solid #ddd"});
(2)通过cssText方法设置css
obj.style.cssText = "width:300px;height:300px;border:1px solid #ddd;";
这样会不会显得简单,且方便了很多呢,特别是对于新create的元素进行初始化css样式

js 设置多条css样式的更多相关文章

  1. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  2. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 用JS改变的元素CSS样式,css里display :none 隐藏 block 显示

    CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...

  4. 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js设置奇偶行数样式

    $(document).ready(function () { odd = { "background": "none" }; //奇数样式 even = { ...

  6. 谷歌下设置滚动条的css样式

    .oLi-lists-scroll::-webkit-scrollbar { width:5px;  padding:1px; background:url(../images/repeat-bar. ...

  7. jquery设置多个css样式

    $(selector).css({property:value, property:value, ...}) 实例: $("p").css({ "color": ...

  8. 用jQuery设置多个css样式

    $("#show_one").css({"position":"fixed","top":"0px" ...

  9. vue中设置全局的css样式

    只需在main.js    ====import './style.less'   main.js =>>   import Vue from 'vue' import App from ...

随机推荐

  1. linux(centos7)下SVN服务器搭建

    https://www.cnblogs.com/fuyuanming/p/6123395.html linux(centos)下SVN服务器如何搭建?说到SVN服务器,想必大家都知道,可以是在LINU ...

  2. 【DSP开发】回马枪要你命 德州仪器发布最强ARM芯片Keystone II

    之前许多传闻称德州仪器将会彻底放弃OMAP系列ARM处理器,从此离开手持设备的江湖.如果你信以为真,那可就太小看德州仪器这个老狐狸了--要知道德州仪器诞生的比Intel都还早几年.三小时前,德州仪器宣 ...

  3. CreateThread()使用实例

    1.定义的全局变量 DWORD WINAPI ClientThread(LPVOID lpParam); struct ClientInfo {   SOCKET sock;   SOCKADDR_I ...

  4. [python] super() 用法

    问题的发现与提出 在Python类的方法(method)中,要调用父类的某个方法,在Python 2.2以前,通常的写法如下: class A: def __init__(self): print & ...

  5. 【转贴】龙芯内核发展策略 已经支持k8s

    龙芯内核发展策略 时间:2019-06-27 15:48  来源:未知   作者:龙芯中科   点击:1002次 http://www.loongson.cn/m/view.php?aid=1118 ...

  6. ABC134F Permutation Oddness

    Problem Statement Let us define the oddness of a permutation $p = \{p_1, p_2, \dots, p_n\}$ of $\{1, ...

  7. 300英雄的危机(heroes)

    题面 正解与图书馆馆长的考验一致,都是分层图SPFA: #include <iostream> #include <cstdio> #include <cstring&g ...

  8. Transparency Tutorial with C# - Part 3

    Download image fade demo - 4 Kb Download image fade source project- 7 Kb Download image fade images ...

  9. leecode100热题 HOT 100(2)

    # 题名 题解 通过率 难度 出现频率     142 环形链表 II       43.3% 中等     146 LRU缓存机制       43.3% 中等     148 排序链表       ...

  10. 常用的TCP/UDP端口

    已知的TCP/UDP端口可以在wikipedia上找到: List of TCP and UDP port numbers, 太多了,按组列举了最常用的,如下: FTP:21SSH:22Telnet: ...