码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript脚本化CSS样式表

时间:2018-11-22 20:45:44      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:自己   str   开启   rip   ack   clip   ext   document   under   

在使用JavaScript脚本化操作CSS样式表的时候,必须要使用到两个对象:

  1,元素对象:也就是<link>元素与<style>元素

  2,CSSStyleSheet对象:与当前文档关联的在一起的样式表,通过document.styleSheets获取,该对象是只读的类数组对象(由CSSStyleSheet对象组成的类数组)。

技术分享图片

  注:可以通过在<link>与<style>元素中添加title属性,这样返回的CSSStyleSheet对象中的title属性可以与之对应起来。

 

开启和关闭样式表:

  每个CSSStyleSheet对象都有一个disabled属性,可以用来查询样式表是否在使用,false时表示该样式表在使用,true时表示浏览器关闭忽略该样式表,因此,可以通过将disabled属性设置为true,来关闭指定样式表的应用。

.box{
            width:600px;
            height:600px;
            border:3px solid black;
        }
        .box2{
            width:300px;
            height:300px;
            border:2px solid red;
        }
        .box3{
            width:100px;
            height:100px;
            border:1px solid skyblue;
        }
<body>
      <div class="box" style="margin:20px;position: relative;">
          <div class="box2" style="position: absolute;padding: 20px;">
              <div class="box3" style="-webkit-clip:rect(0px 50px 50px 50px);background-color: skyblue"></div>6666666
          </div>
      </div>

      <button onclick="test()">取消</button>
  </body>
function test(){
          document.styleSheets[0].disabled = true;
       }

  点击取消按钮前:

技术分享图片

  点击取消按钮后:

技术分享图片

 

样式表的其他操作:

  document.styleSheets数组由CSSStyleSheet对象组成,在标准API中,每个CSSStyleSheet对象都有一个cssRules数组(由CSSStyleRule对象组成),包含了样式表的所有规则(IE中为rules)。

技术分享图片

  可以在style属性中直接修改规则。

  标准API中还定义了insertRule()与deleteRule()方法来添加和删除规则。

  添加一条规则:document.styleSheets[0].insertRule("h1{border:1px solid red;}",0);

  删除一条规则:document.styleSheets[0].deleteRule(要删除的CSSStyleRule数组的下标);

  IE不支持这两个方法,它有自己的实现方法:addRule(),removeRulr()。和标准API唯一的不同就是addRule方法的参数为选择器文本和样式文本分别作为参数传递。

 

JavaScript脚本化CSS样式表

标签:自己   str   开启   rip   ack   clip   ext   document   under   

原文地址:https://www.cnblogs.com/huangzhenghaoBKY/p/10003242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!