JS:操作样式表3:内联和外链样式

时间:2022-04-21 16:58:26

  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; width: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:JS:操作样式表3:内联和外链样式  第二种写法更简洁。