zoukankan      html  css  js  c++  java
  • JS:操作样式表3:内联和外链样式

      var box = document.getElementById("box");

      box.style.属性;只能读取修改行内样式。

      //访问元素样式2,对外链样式表进行操作

      document.styleSheets //得到的是样式表集合 styleSheetList

      var sheet = document.styleSheets[0];//取得要修改的第一个样式表

    一:操作

      1.//非ie浏览器下可以识别一下方法和属性
        alert(sheet.cssRules); //样式集合列表
        sheet.deleteRule(0); //删除样式规则(此处上的是第一css样式)
        sheet.insertRule("body {background-color:red}",0); //在第一个位置添加一个样式规则

      2.//针对ie浏览器使用如下:

        alert(sheet.rules);
        sheet.removeRule(0);
        sheet.addRule("body","background-color:red",0);

      //操作样式表,兼容所有浏览器:将1和2结合在一起:  

        document.styleSheets;
        var sheet = document.styleSheets[0];//CSSstyleSheet 取得要修改的样式表

        cinsertRule(sheet,"div","background-color:green; color:pink; font-size:18px; 200px;",0);//对已有的属性修改不成功

        //添加css规则,并且兼容所有浏览器
          function cinsertRule (sheet, selectorText,cssText,position) {
            //如果是非IE
            if (sheet.insertRule) {
              sheet.insertRule(selectorText + "{"+cssText+"}", position);
            } //如果是ie
             else if (sheet.addRule) {
              sheet.addRule(selectorText,cssText,position);
              };
           }


          cdeteRule(sheet, 1); //将原来写的css规则删去,但上面新增加的并没有删去

        //删除css规则,并且兼容所有浏览器
          function cdeteRule (sheet,index) {
            if (sheet.deleteRule) {
              sheet.deleteRule(index);
             }
              else if (sheet.removeRule) {
                  sheet.removeRule(index);
            };
          }

     二,取值

        //通过外链形式,获取样式文本,选择器,样式值
          var sheet3 = document.styleSheets[0];
          var rules3 = sheet3.cssRules||sheet3.rules; //兼容ie和非ie
          var crule = rules3[0];
          alert(crule.cssText); //.div {color:red;font-size:20px;float:right;} 没有调用删除和添加规则函数
          alert(crule.selectorText); //.box
          alert(crule.style.color); //red

    ps:  第二种写法更简洁。

      

      

  • 相关阅读:
    微信公众平台—— 获取微信服务器IP地址
    微信公众平台——获取access_token、expires_in
    PHP版本切换
    开源各种系统
    VUE -- 如何快速的写出一个Vue的icon组件?
    Mac下php 5升级到php 7的步骤详解
    Nginx反向代理导致PHP获取不到正确的HTTP_HOST,SERVER_NAME,客户端IP的解决方法
    nginx服务器URL无法自动添加index.php
    php类库安装xml simplexml
    Mac DBeaver Client home is not specified for connection解决办法
  • 原文地址:https://www.cnblogs.com/wine/p/5051199.html
Copyright © 2011-2022 走看看