DIV CSS 佈局教程網

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)，再執行上面的方法.