DOM-设置样式
2016-03-01 23:48
447 查看
<!DOCTYPE html> <html> <head> <title> new document </title> <meta charset="utf-8" /> <style> #d1{ width:100px; height:100px; background-color:red; } .test{ background:yellow; } </style> <script> function changeStyle(){ //1、获取样式表对象 var sheets = document.styleSheets; var sheet = sheets[0]; //2、获取 sheet 中所有的样式规则 var rules = sheet.rules; //3、获取 某一具体规则 var rule = rules[0]; console.log(rule); //4、设置 属性 rule.style.backgroundColor="yellow"; } </script> </head> <body> <button onclick="changeStyle()">设置样式</button> <div id="d1"></div> </body> </html>
相关文章推荐
- DOM-元素的属性,样式
- 作品第四课----css函数一设置/读取对象的属性
- HTML-CSS文件链接HTML的三种方式
- CSS---@import
- CSS---!important
- CSS3弹性布局内容对齐(justify-content)属性使用详解
- CSS3媒介查询
- back to top 回到顶部按钮 css+js
- CSS3:有雪花的导航栏实例
- 针对铁定浏览器的css选择符
- CSS布局总结
- CSS中cursor的pointer 与 hand-备
- CSS居中的方法总结
- CSS布局模型思考
- 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范
- css特效实现html表格显示部分内容,当鼠标移上去显示全部。
- css中合理的使用nth-child实现布局
- SCSS迷你书(下) - SCSS中@指令
- SCSS迷你书(下) - SCSS中@指令
- SCSS迷你书(上)