您的位置：首页 > Web前端 > CSS

用JS中document.styleSheets控制cssRules规则

2016-06-02 08:41 387 查看

学习《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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css rules</title>

<style type="text/css">

#div1{width:100%;height:400px; background:red;}

</style>

<script>



    window.onload=init;

    function $(id){

              return "string" == typeof id ? document.getElementById(id) : id;

    }

    function init(){

        var ocssRules=document.styleSheets[0].cssRules || document.styleSheets[0].rules || window.CSSRule.STYLE_RULE;

        var theEl=$("div1");

        ocssRules[0].style.background="yellow";

        alert(ocssRules[0].style.background);

    }





</script>

</head>



<body>

<div id="div1"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航