使用js修改文档中的样式表
来源:互联网 发布:乐清知临寄宿学校招聘 编辑:程序博客网 时间:2024/06/01 16:15
使用js修改文档中的样式表
大致总结为四步:
1.先获取文档中所有的式样表,通过下标定位到得到你想要的样式表
var sheets = document.styleSheets;console.log(sheets);var firstSheet = sheets[0];2. 获取式样表中的规则列表
(注:IE使用的是rules,其他的浏览器使用的是cssRules)
通过下标定位到你想要的规则
var rules = firstSheet.cssRules || firstSheet.rules;var firstRule = rules[0];这时候我们就可以看到这个规则里面的各种式样了
console.log(firstRule.selectorText); //firstRules里面的选择器console.log(firstRule.style.cssText); //以字符串形式返回firstRules里面所有的css式样console.log(firstRule.style.width); //获取某个样式的值console.log(firstRule.style.height);console.log(firstRule.style.backgroundColor);3.接下来,我们就可以对他们进行设置了
firstRule.style.width = '200px';firstRule.style.height = '200px';firstRule.style.backgroundColor = 'yellow';4. 添加 ,删除rules
使用函数insertRule()函数插入,调用某一个sheet
firstSheet.insertRule('body{background-color:green}',2);
addRule('body','background-color:green',2)//但是IE不支持,需要使用addRule使用position指定的规则删除 deleteRule(position)
firstSheet.deleteRule(2);
//ie 不支持 removeRule(2)
还有一种稍微快速点的方法,快速命中sheet
使用sheet快速获取式样表,只对style和link元素有效,首先把你想获取的style或link设置一个id值
var styleElement = docment.getElementByID('mystyle');那么.我们就可以得到这个样式表了,注IE使用的是styleSheet,其他浏览器使用的是sheet
var sheet = styleElement.sheet || styleElement.styleSheet;var rules = sheet.cssRules || sheet.rules;var firstRule = rules[0];console.log(firstRule.selectorText);console.log(firstRule.style.cssText);console.log(firstRule.style.width);console.log(firstRule.style.height);console.log(firstRule.style.backgroundColor);下面就可以设置样式了,具体同上
0 0
- 使用js修改文档中的样式表
- UIWebView使用js 修改样式
- 用JS实现input中的file标签的样式(当要修改file标签的字体样式时使用)
- 使用JQuery修改Yii中的CSS样式。
- JS查找外联样式表中的样式
- JS获取外部样式表中的样式
- JS如何访问修改css样式表
- js修改样式
- js 修改页面样式
- js修改css样式
- JS修改元素样式
- <Js>修改样式
- js修改css样式
- js修改css样式
- 如何使用JS来改变CSS样式 -- 元素的样式属性名称在CSS和JS中的对照表
- 样式表中的 element.style样式如何修改
- 样式表中的 element.style样式如何修改
- 关于使用JS动态修改CSS样式问题
- Android Studio 快捷键学习
- activiti工作楼04-启动流程
- maven pom.xml详解
- 关于PrintWriter中的print与println方法的区别
- 【poj1144】 Network
- 使用js修改文档中的样式表
- 数据结构单链表问题
- 编码问题的整理
- leetcode小白解题记录——第三题
- MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk
- hdu 1754 I Hate It(线段树单点更新)
- 从今天(8.18)到校招10月初的*学习计划*
- 大数求和
- 51nod 最复杂的数(反素数)