用JS中document.styleSheets控制cssRules规则

转载 2016年06月02日 08:41:08

    学习《JavaScript高级程序设计》的时候知道了一个小小的知识点……以前用JS控制写在html标签里用style属性的样式<h1 style="width:100px;">,可以用普通的DOM方法获得。例如theEl.style.width,但是如果是写在style标签下的样式<type="text/css">h1{width:100px;}</style>,这种方法就会输出空值。
    这个时候必须用到cssRules集合才能取得、修改该样式的值。

[html] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>css rules</title>  
  6. <style type="text/css">  
  7. #div1{width:100%;height:400px; background:red;}  
  8. </style>  
  9. <script>  
  10.   
  11.     window.onload=init;  
  12.     function $(id){  
  13.               return "string" == typeof id ? document.getElementById(id) : id;  
  14.     }  
  15.     function init(){  
  16.         var ocssRules=document.styleSheets[0].cssRules || document.styleSheets[0].rules || window.CSSRule.STYLE_RULE;  
  17.         var theEl=$("div1");  
  18.         ocssRules[0].style.background="yellow";  
  19.         alert(ocssRules[0].style.background);  
  20.     }  
  21.       
  22.   
  23. </script>  
  24. </head>  
  25.   
  26. <body>  
  27. <div id="div1"></div>  
  28. </body>  
  29. </html>  

用JS中document.styleSheets控制cssRules规则

学习《javascript高级程序设计》的时候知道了一个小小的知识点……以前用JS控制写在html标签里用style属性的样式,可以用普通的DOM方法获得。例如theEl.style.width,但是...

document.styleSheets以及js中实现样式表的切换、样式的增加减少

document.styleSheets可以返回由网页中所用到的样式表组成的数组,但是不包括直接嵌在元素里的style。 例如: 上面代码弹出的对话框显示2。至于样式表在数组里的顺序由...

CSS3-JS-styleSheets的概述

下面通过代码进行解释: 无标题文档 .box{width:100px;height:100px;background:#30D716;} .box2{width:200px;h...

js操作cssRule的增删改

initSize: function(){                 var sheet = null;                 for (var i = 0, len = docume...
  • mochong
  • mochong
  • 2017年03月28日 14:08
  • 333

js控制过场动画,setTimeout和clearTimeout的用法以及document.onreadystatechange判断页面是否加载结束

思路 当html加载完的时候,关闭过场动画,如果时间太长用定时器设置5秒后关闭过场动画 setTimeout的用法 var setT = setTimeout(function() { ...
  • kkgbn
  • kkgbn
  • 2016年09月20日 15:57
  • 785

make工具及makefile规则 |from document

1  makefile规则 makefile是一个make的规则描述脚本文件,包括四种类型行:目标行、命令行、宏定义行和make伪指令行(如“include”)。makefile文件中注释以“#”开...

make工具及makefile规则 |from document .

1  makefile规则 makefile是一个make的规则描述脚本文件,包括四种类型行:目标行、命令行、宏定义行和make伪指令行(如“include”)。makefile文件中注释以“#”开...

js关于document和window对象

  • 2013年12月30日 17:13
  • 30KB
  • 下载

js技术中document对象技术汇总

  • 2011年05月06日 14:17
  • 2KB
  • 下载

js中document通过ID获取的一些使用方法

document.getElementById("link").href; document.getElementById("link").target; document.getElemen...
  • hpugym
  • hpugym
  • 2015年11月08日 13:49
  • 19484
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用JS中document.styleSheets控制cssRules规则
举报原因:
原因补充:

(最多只允许输入30个字)