js在浏览器兼容:样式访问和设置

时间:2021-04-16

1. CSS的"float"属性

【分析说明】Javascript访问一个给定CSS 值的最基本句法是:object.style.property,但部分CSS属性跟Javascript中的保留字命名相同,如"float","for","class"等,不同浏览器写法不同。

在IE中这样写:

document.getElementById("header").style.styleFloat = "left";
在Firefox中这样写:

document.getElementById("header").style.cssFloat = "left";
【兼容处理】在写之前加一个判断,判断浏览器是否是IE:

if(document.all){
  document.getElementById("header").style.styleFloat = "left";
}
else{
  document.getElementById("header").style.cssFloat = "left";
}

2. 访问<label>标签中的"for"

【分析说明】和"float"属性一样,同样需要使用不现的句法区分来访问<label>标签中的"for"。

在IE中这样写:

var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
在Firefox中这样写:

var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
【兼容处理】解决的方法也是先 判断浏览器类型。

3. 访问和设置class属性

【分析说明】同样由于class是Javascript保留字的原因,这两种浏览器使用不同的 JavaScript 方法来获取这个属性。

IE8.0之前的所有IE版本的写法:

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
适用于IE8.0 以及 firefox的写法:

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
  另外,在使用setAttribute()设置Class属性的时候,两种浏览器也存在同样的差异。

  setAttribute("className",value);

  这种写法适用于IE8.0之前的所有IE版本,注意:IE8.0也不支持"className"属性了。

  setAttribute("class",value);适用于IE8.0 以及 firefox。

【兼容处理】

方法一,两种都写上:

var myObject = document.getElementById("header");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
//设置header的class为classValue
方法二,IE和FF都支持object.className,所以可以这样写:

var myObject = document.getElementById("header");
myObject.className="classValue";//设置header的class为classValue

方法三,先判断浏览器类型,再根据浏览器类型采用对应的写法。

4. 对象宽高赋值问题

【分析说明】FireFox中类似 obj.style.height = imgObj.height 的语句无效。

【兼容处理】统一使用 obj.style.height = imgObj.height + ‘px’;

5.添加样式

【分析说明】IE中使用addRules()方法添加样式,如:styleSheet.addRule("p","color:#ccc",styleSheet.length).而该方法不兼容FF,在FF使用insetRule()方法替换。如styleSheet.insertRule("p{color:#ccc}",styleSheet.length).

【兼容处理】if(styleSheet.insertRule){

        //insertRule()方法

      }else{

        //addRule()方法

      }

6.最终样式

【分析说明】有时候我们自定义的样式会失效,是因为发生了样式的重叠,如一个类选择符定义的样式和一个标签选择符定义的样式,此时后者失效。则此时需要用到最终样式了。IE中最终样式的写法是ele.currentStyle.属性名。DOM中标准写法是利用document.defaultView对象,如document.defaultView.getComputedStyle(elel,null),该方法兼容FF.

【兼容处理】先判断浏览器(document.all),再执行上面的方法.

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章