DOM操作样式表及其兼容性

2021-12-12 02:12:01

DOM操作样式表的时候，存在很多浏览器兼容上的问题，测试的时候用的是Firefox 28.0、IE11、IE8、Chrome。测试的时候发现，不兼容问题基本上都是IE8和非IE浏览器之家的问题，很多IE8和非IE不兼容的方法在IE11中都已经兼容，而谷歌浏览器对IE8和Firefox中不兼容的方法都支持。

一、行内样式的操作

　　

<div id="box" style=“float:right;font-size:30px;color:red;”>测试DIV</div>

        var box = document.getElementById("box");//获得这个元素

　　一般的行内样式，可以直接通过style来修改或设置属性值

　　　　 box.style.color = "green";//获得值

　　但是对于向 font-size 这种通过连字符连接起来的属性，则需要将中间的连字符去掉，，将后面的首字符大写

　　　　

　　　　box.style.fontSize = "50px";

　　float 关键字处理，所以不能够直接处理，IE和非IE又存在兼容性的问题
 　　　　  alert(box.style.float); /　　/IE11返回的是right，但是最好不要这样做，

　　非IE：在前面添加一个css,并且将关键字的首字符改为大写即可。
  　　　　 box.style.cssFloat = “left”; 　　//IE8返回的为null，IE11支持这种写法

　　IE浏览器：在关键字的前面添加一个style，然后将关键字的首字符进行大写。
　　　　 box.style.styleFloat = "left";  　

　

　　跨浏览器的方法（此处做的是获得值，设置值是一样的）

　　var f = typeof box.style.cssFloat != "null" ? box.style.cssFloat : box.style.styleFloat;

　　//也可以这样：
　　var f = box.style.cssFloat || box.style.styleFloat; 　　//IE8在执行前面后返回的是null，就会执行后面

二、获得计算后的样式

　　复杂样式是通过计算后加到元素上面的，上面直接通过box.style这种但一样试是获取不到属性的，需要通过计算样式来获取，

　　非IE提供的方法：
  　　　　 var style = window.getComputedStyle(box,null);　　 //参数1是传递的一个元素Element，参数二是一个伪类，一般没有伪类就写null 
　　IE提供的方法
  　　　　 var style = box.currentedStyle;

　　做兼容的方法：PS：IE中window.getComputedStyle(box,null);会报错，但是window.getComputedStyle不会
　　　　 alert(typeof box.currentStyle); // IE:object Firefox：undefined 　　　　

　　　　 alert(typeof window.getComputedStyle); //function   
　　兼容方法1：
　　

　　　　 var style = typeof box.currentStyle == "undefined" ? window.getComputedStyle(box,null) : box.currentedStyle;

　　兼容方法二：PS：因为用或预算做兼容的时候，需要前面返回为null或者是undefined时才会执行后面，故先做一个三元运算
　　　　 var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentedStyle;

　　PS：计算的样式只是能够获取样式属性值，但是不能够修改值。之所以可以获取内链和链接，
　　　　因为不管你在那里设置CSS，最终会驻留在浏览器的计算样式里
　　　　对于向border这种复合样式，是不能够直接通过 style.border来获取.但是可以直接获取它计算后的单个属性的值：alert(style.borderTopColor)

三、操作样式表

　　通过ID和通过class来操作，class的属性样式是可以叠加的，相同的就覆盖，不同的就进行叠加，共同作用
　　　　在开发过程中不要改变ID，这样会照成灾难性的后果，修改了ID后，会附带的将这个ID对应的样式作用到这个元素上面
　　　　

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

  box.id = 'pox'; //修改ID 的时候会附带的将这个ID对应的样式表给添加进来

  box.style.color="blue";

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

  pox.style.background="yellow";

  box.style.fontSize = "50px"; //这两个ID来改变样式，同时起作用

　　通过class来操作样式表，通过元素的className来操作
 　　　　box.className = "aaa"; 　　//清除之前所有的样式，然后再添加一个样式 aaa

　　在某些情况下个元素添加样式和删除样式，是需要先判断元素是否具有这个样式，并且判断必须是精确判断
　　　　精确判断元素中是否具有某个样式，返回bool值

  function hasClass(element,cName){

   　　//"aaa bbb ccc ddd";

   　　var reg = new RegExp("(\\s|^)"+cName+"(\\s|$)");//传递过来样式是一个变量，故要转换成字符串，

   　　//样式可能是在开头，也可能是在中间，也可能是在结尾，

   　　//样式的匹配查找必须要精确匹配，如果不精确 aaa 和 aa 也可以匹配,所以添加了两头的分组。

   　　return !!element.className.match(reg); //将匹配结果用bool值返回

   　　//match 函数是正则表达式里面的匹配函数，返回匹配成功的字符串,没有匹配成功返回为null

  }

　　增加样式函数   传递一个元素以及要增加的样式表

  function addClass(element,cName){

   　　//需要先判断这个元素是否已经存在传递过来的这个样式

   　　if(!hasClass(element,cName)){　　//如果不存在就添加

    　　　　element.className += " "+cName; 　　//添加一个空格隔开，若不隔开，结果将由 aaa bbb 变成 aaabbb，

   　　}

  }

　　移除元素中的某一个样式值

function removeClass(element,cName){

   if(hasClass(element,cName)){　　//存在就去掉

    //替换仅仅是替换的字符串，故需要从新赋值

    element.className = element.className.replace(new RegExp("(\\s|^)"+cName+"(\\s|$)")," ");

    //在匹配的时候是去掉了空白的，故换掉的时候添加一个空白

   }
}

四、外联试 <link> 样式的操作

　　PS：Chrome 浏览器在本地运行时会出现问题，rules 会变成 null，只要把它放到服务器上运行即可正常
　　获取内联<style>或链接<link>样式表

　var link = document.getElementsByTagName("link")[0]; //object HTMLLinkElement

  var style = document.getElementsByTagName("style")[0]; //HTMLStyleElement

　　然后通过这两个变量获得样式表sheet

　　火狐和IE11（新版本的IE支持的方法）
　　　　 var steet = link.sheet; //object CSSStyleSheet

　　IE8提供的方法，新版本的IE已经不支持这个方法
　　　　 var sheet2 = link1.styleSheet; //IE11是undefined

  //兼容方法：

　var steet = link.styleSheet || link.sheet;

  //另外还有一个方法，能够兼容所有的浏览器

  var sheet = document.styleSheet[0]; //本身获取的是一个sheet集合，要操作某一个样式表就用数组的方式获得

　　样式表的几个简单属性
　　　　sheet.disabled; 　　//表示样式表是否可用，如果设置为true，这样式表不起作用，默认的是为false
　　　　sheet.href;  　　　　//如果是通过<link>包含的，则样式表为 URL，否则为 null
　　　　sheet.type;  　　　　//样式表类型字符串

样式的规则 就是，一群样式的集合表示一个规则，一个类 aaa的花括号中包含的代码就是一个规则

　　获得规则集合（存在浏览器的不兼容问题）：
　　　　

var rules = sheet.cssRules;  　　//非IE浏览器以及新版本的IE(IE11)支持

var rules = sheet.rules;   　　　　//IE8提供的方法，

　　故要获得样式集合就必须做一个兼容方法：
　　

var rules = sheet.cssRules || sheet.rules;

　　CSSStyleRules 可以使用的属性

　  var txt = rules[0].ceeText; 　　　　　　  //返回的是当前第一个规则的所有css代码

　　var secTxt = rules[0].selectorText; 　　//返回的是当前这个规则前面的选择符文本， #box 或者说是 .aaa

   var box = rules[0].parentStyleSheet; 　 //object CSSStyleSheet  当前规则的样式表，IE8不支持

   var style = rules[0].style; 　　　　　　  //返回 CSSStyleDeclaration 对象，可以获取和设置样式

   var type = rules[0].type; 　　　　　　　　//表示规则的常量值，对于样式规则，值为 1，IE8 不支持

  //通过属性style可以获取和设置样式

   alert(rules[0].style.color); 　　//red

   rules[0].style.cssFloat = "right"; 　　//IE8: rules[0].style.styleFloat = "right";

　　插入规则，存在浏览器的兼容性问题，并且在测试的时候发现，
　　　　插入的规则的选择符文本只能够是body，不能为其它,插入的规则会马上作用与当前的html页面
　　　　非IE（IE11支持这种写法）

sheet.insertRule("body {float:right}",0); 　　//从第0个位置插入一条规则body，注意花括号

　　　　

　　　　IE8 (IE11同样支持这种写法)

sheet.addRule("body","float:right",0); //从弟0个位置插入一条规则body，规则题不需要花括号

　　　　兼容方法

　　//alert(typeof sheet.insertRule); 　　//IE:function 　　Firefox:function

   //alert(typeof sheet.addRule); 　　　　//IE:function 　　Firefox:undefined

   function insertRule(sheet,selectorText,cssText,position){ //要添加的样式表，规则选择符，规则文本，添加的位置

   　　if(sheet.insertRule){ //如果是IE8，undefined经过转换后为false

     　  　sheet.insertRule(selectorText+"{"+cssText+"}",position);

   　　}else if(sheet.addRule){ //也可以用typeof来做判断

     　　　sheet.addRule(selectorText,cssText,position);

    　 }

   }

　　

　　删除规则，也存在浏览器的兼容性问题，
　　　　非IE，IE高版本也支持的方法

sheet.deleteRule(0); //删除样式表中的第0个规则，这条语句作用后，所有加载了本规则的所有元素的CSS代码失去作用

　　　　IE8

 sheet.removeRule(0); //删除样式表中的第0个规则

　　兼容方法

   //alert(typeof sheet.removeRule); //IE:function Firefox:undefined

   //alert(typeof sheet.deleteRule); //IE:function Firefox:function

   function deleteRule(sheet,position){ //操作的样式表，删除的第几个规则

   　　if(sheet.deleteRule){

   　　　　sheet.deleteRule(position);

   　　}else if(sheet.removeRule){

   　　　　sheet.removeRule(position);

  　　 }

  }
上一篇：toastr 通知提示插件


下一篇：JavaScript编程：使用DOM操作样式表