`

javascript 操作css

阅读更多
css stylesheet 也是DOM 结构, Javascript 获取的方法是 document.styleSheets[n] 数组

一个 <style type="text/css"></style> 标签的内容,就产生一个styleSheet item,
一个<link href="/images2014/styles.css" rel="stylesheet" type="text/css"> 标签也产生一个item.
举例来讲,document.styleSheets.length=2 ,就说明有两个 <style type="text/css"> ,</style> 标签, 或者有两个css 引用文件, 或者一个标签,一个引用文件在网页中。

每个style 里,一个{} 括起来的东西就是一个rule

document.styleSheets[n].cssRules.length 来判断多少个rule

增加 rule 用 insertRule(selectorText, index)
index 为插入的索引值,如果在原有基础上增加一条rule ,则 +1 ,就会append 后面
例:
document.styleSheets[0].insertRule("#a"+v_i+"{position:obsolute;background:url(img/explorsion1.jpg);}",index);

每个rule 下,都可以直接设置 style 属性
document.styleSheets[0].cssRules[0].style["background-position"]="absolute"

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics