首页 > 技术文章 > DOM样式

fannylovo 2015-07-22 23:17 原文

一、getElementById的封装 

  function $(id) {
    return document.getElementById(id);
  }

二、cssRules

  它是一个包含了样式表中定义的所有CSS规则的集合,chrome和firefox浏览器能正确实现该标准;IE浏览器将其命名为rules。

    document.styleSheets[sheetsIndex].cssRules[rulesIndex]; 

    document.styleSheets[sheetsIndex].rules[rulesIndex]; 

三、添加、删除样式表

  chrome和FF通过insertRule方式添加,IE通过addRules添加:

    document.styleSheets[0].insertRule(".div3{width:200px;height:200px;}", 0);

  通过deleteRule删除样式表:

    document.styleSheets[0].deleteRule(0);

四、查看最终样式表

  通过getComputedStyle的方式查询:

    window.getComputedStyle(div2, null).width

推荐阅读