js 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. 訪問<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';

>