首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式
阅读:27
JS addRule()和insertRule()方法:添加CSS样式
在 JavaScript 中,使用 addRule() 方法可以为样式表增加一个样式。用法如下:
Firefox 支持使用 insertRule() 方法添加样式。用法如下:
styleSheets.addRule(selector, style, [index])
styleSheets 表示样式表引用,参数说明如下:- selector:表示样式选择符,以字符串的形式传递。
- style:表示具体的声明,以字符串的形式传递。
- index:表示一个索引号,表示添加样式在样式表中的索引位置,默认为 -1,表示位于样式表的末尾,该参数可以不设置。
Firefox 支持使用 insertRule() 方法添加样式。用法如下:
styleSheet.insertRule(rule, [index])
参数说明如下:- rule:表示一个完整的样式字符串。
- index:与 addRule() 方法中的 index 参数作用相同,但默认为 0,放置在样式表的末尾。
示例
在下面示例中,先在文档中定义一个内部样式表,然后使用 styleSheets 集合获取当前样式表,利用数组默认属性 length 获取样式表中包含的样式个数,最后在脚本中使用 addRule() (或 insertRule())方法增加一个新样式,样式选择符为 p,样式声明背景色为红色,字体颜色为白色,段落内部补白为 1 个字体大小。<style type="text/css"> #box { color:green; } .red { color:red; } .blue { color:blue; } </style> <script> window.onload = function(){ var styleSheets = document.styleSheets[0]; //获取样式表引用 var index = styleSheets.length; //获取样式表中包含样式的个数 if(styleSheets.insertRule){ //判断浏览器是否支持insertRule()方法 //使用insertRule()方法在文档内部样式表中增加一个p标签选择符的样式,设置段落背景色为红色,字体颜色为白色,补白为一个字体大小。插入位置在样式表的末尾, styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index); }else{ //如果哦浏览器不支持insertRule()方法 styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index); } } </script> <p>在样式表中增加样式操作</p>保存页面,在浏览器中预览,效果如下所示:
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频