js CSS的 float class宽高赋值不兼容处理方法(ie7,ie8,firefo...

网页特效css教程的 float class宽高赋值不兼容处理方法(ie7,ie8,firefox)

 

css的"float"属性

【分析说明】网页特效访问一个给定css 值的最基本句法是：object.style.property，但部分css属性跟网页特效中的保留字命名相同，如"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. 访问标签中的"for"

【分析说明】和"float"属性一样，同样需要使用不现的句法区分来访问标签中的"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是java script保留字的原因，这两种浏览器使用不同的 java script 方法来获取这个属性。

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';

>

 

 

在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是java script保留字的原因，这两种浏览器使用不同的 java script 方法来获取这个属性。

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';

>

【分析说明】和"float"属性一样，同样需要使用不现的句法区分来访问标签中的"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是java script保留字的原因，这两种浏览器使用不同的 java script 方法来获取这个属性。

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';

>

 

在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是java script保留字的原因，这两种浏览器使用不同的 java script 方法来获取这个属性。

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';

>