javascript 操作css

最新推荐文章于 2024-10-07 09:44:48 发布

david95

最新推荐文章于 2024-10-07 09:44:48 发布

阅读量112

点赞数

分类专栏： Javascript css 文章标签： javascript 动态更新 css

本文链接：https://blog.youkuaiyun.com/david95/article/details/84741249

版权

Javascript 同时被 2 个专栏收录

10 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript通过DOM操作CSS样式表，包括获取样式表、读取和修改样式规则等。详细讲述了document.styleSheets的使用方法，以及如何通过insertRule方法添加新的样式规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"