WEB开发网
开发学院网页设计JavaScript javascript之DOM技术(二) 阅读

javascript之DOM技术(二)

 2010-09-14 13:06:48 来源:WEB开发网   
核心提示: 这里使用了我在《javascript事件模型框架》中摘记的JS文件,实现可折叠区域的道理与此相同,javascript之DOM技术(二)(2),很常用的功能,不再细说,标准DOM中规定每个样式表的规则集合叫cssRules,而IE中叫rules,4.访问样式表,因为style对象只能访问一

这里使用了我在《javascript事件模型框架》中摘记的JS文件。实现可折叠区域的道理与此相同,很常用的功能,不再细说。

4.访问样式表,因为style对象只能访问一个元素的CSS样式,而对于<style/>定义的或者外部CSS文件定义的CSS规则没办法访问,这就引出了如何访问样式表的问题。我们可以通过下面的方式访问:

var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;

document.styleSheets返回页面上所有样式表的引用,标准DOM中规定每个样式表的规则集合叫cssRules,而IE中叫rules,所以我们用上面的表达式来处理浏览器兼容问题。一个访问的例子:

<html>
  <head>
    <title>Accessing Style Sheets Example</title>
    <style type="text/css">
      div.special {
        background-color: red;
        height: 10px;
        width: 10px;
        margin: 10px;
      }
    </style>
    <script type="text/javascript">
      function changeBackgroundColor() {
        var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
        oCSSRules[0].style.backgroundColor = "blue";
      }
    </script>
  </head>
  <body>
    <div id="div1" class="special"></div>
    <div id="div2" class="special"></div>
    <div id="div3" class="special"></div>
    
    <input type="button" value="Change Background Color" onclick="changeBackgroundColor()" />
  </body>
</html>

上一页  1 2 3 4 5  下一页

Tags:javascript DOM 技术

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接