如果在一个网页中给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. Pytorch修改ResNet模型全连接层进行直接训练

    之前在用预训练的ResNet的模型进行迁移训练时,是固定除最后一层的前面层权重,然后把全连接层输出改为自己需要的数目,进行最后一层的训练,那么现在假如想要只是把 最后一层的输出改一下,不需要加载前面层 ...

  2. 【机器学习理论】概率论与数理统计--假设检验,卡方检验,t检验,F检验,方差分析

    显著性水平α与P值: 1.显著性水平是估计总体参数落在某一区间内,可能犯错误的概率,用α表示. 显著性是对差异的程度而言的,是在进行假设检验前确定的一个可允许作为判断界限的小概率标准. 2.P值是用来 ...

  3. 字符串转 Boolean 的正确方式

    String s1 = "false"; String s2 = "true"; String s3 = "fAlSe"; String s ...

  4. Jenkins 远程部署

    参考:https://www.cnblogs.com/bookwed/p/4583033.html 准备环境: 本地开发,安装虚拟机,在虚拟机安装Linux服务器 步骤: 1.安装插件,登录到Jenk ...

  5. spring boot 框架根據 sql 創建語句自動生成 MVC層類代碼

    GITHUB: https://github.com/lin1270/spring_boot_sql2code 會自動生成model.mapper.service.controller. 代碼使用No ...

  6. [c++] 计算太阳高度角

    /* 输入参数: Longitude - 经度(单位"度") Latitude - 纬度(单位"度") Year - 年 Month - 月 Day - 日 H ...

  7. MYSQL—第二部分(Linux版本的安装和数据表的操作)

    Linux版本的安装(过于简单了) 安装: ? 1 yum install mysql-server 服务端启动 ? 1 mysql.server start 客户端连接 ? 1 2 3 4 5 6 ...

  8. 2016年蓝桥杯省赛C++A组 消除尾一

    消除尾一: 下面的代码把一个整数的二进制表示的最右边的连续的1全部变成0如果最后一位是0,则原数字保持不变. 如果采用代码中的测试数据,应该输出: 00000000000000000000000001 ...

  9. oracle数据库表恢复到特定时间点

    某一张表被应用软件里误操作把数据都清空了,现在想恢复到清空之间,比如2013年8月13日14点以前,应该怎样操作? 通过这个问题可以引发一系列的知识点串联. 1.如果开启闪回可以使用闪回表. 怎样查看 ...

  10. Python 过滤HTML实体符号简易方法

    html_tag = {' ': '\n', '"': '\"', '&': '', '<': '<', '>': '>', '&apos; ...