如果在一个网页中给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. Oracle 多行拼接函数 :[Err] ORA-00904: "WM_CONCAT": 标识符无效

    SELECT LISTAGG(GOODSNAME,';') WITHIN GROUP (ORDER BY GOODSNAME) AS sd WM_CONCAT()  方法被替代成:LISTAGG(GO ...

  2. NOIp2017D1T2 时间复杂度【模拟】

    说一说 题目分析请从目录空降... 没想到模拟题还会卡这么久...菜得真实... 这是一个励志的故事:从$0pts->9pts->18pts->27pts->36tps-> ...

  3. 【VS开发】C++异常处理操作

    异常处理的基本思想是简化程序的错误代码,为程序键壮性提供一个标准检测机制. 也许我们已经使用过异常,但是你会是一种习惯吗,不要老是想着当我打开一个文件的时候才用异常判断一下,我知道对你来说你喜欢用re ...

  4. springboot 打包问题 项目依赖三方jar ,之前的同事是直接丢到项目lib下 ,今天使用springbioot打包的时候,找不到这个jar

    试了很多种方法 最后还是老老实实按照maven 那种格式把三方jar(或者很难下载下来的那种jar) 打包成仓库哪种格式 mvn install:install-file -Dfile=C:\User ...

  5. 【案例分享】SpreadJS金融行业应用实践,开发基于Web Excel的指标补录平台

    SpreadJS作为一款基于 HTML5 的纯前端电子表格控件,以“高速低耗.高度类似Excel.可无限扩展”为产品特色,提供移动跨平台和浏览器支持,可同时满足 .NET.Java.App 等应用程序 ...

  6. hashmap存储数据

    在HashMap中,为什么不能使用基本数据类型作为key? 其实和HashMap底层的存储原理有关,HashMap存储数据的特点是:无序.无索引.不能存储重复元素. 存储元素采用的是hash表存储数据 ...

  7. Souvenirs CodeForces - 765F (好题)

    大意: 给定序列$a$, $m$个询问$[l,r]$, 回答$[l,r]$内最接近的两个数的差. 考虑离线, 枚举右端点, 每个点维护左端点的贡献, 对于新添一个点$a_r$, 只考虑左侧点比$a_r ...

  8. Mysql主从分离介绍及实现

    参考: http://www.cnblogs.com/panxuejun/p/5887118.html https://www.cnblogs.com/alvin_xp/p/4162249.html ...

  9. 客户端相关知识学习(五)之什么是webView

    webview是什么?作用是什么?和浏览器有什么关系? Android系统中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件也就是说WebView是一个基 ...

  10. luogu题解 UVA534 【Frogger--最小瓶颈边

    题目链接: https://www.luogu.org/problemnew/show/UVA534 Update 6.18 多点对最短瓶颈路算法:https://www.cnblogs.com/Ry ...