讀古今文學網 > 編寫高質量代碼:改善JavaScript程序的188個建議 > 建議164:關注各種引擎對CSS渲染的分歧 >

建議164:關注各種引擎對CSS渲染的分歧

1.float值

訪問一個給定CSS值的最基本句法如下:


object.style.property


使用駝峰寫法來替換有連接符的值。例如,訪問某個ID為「header」的<p>的background-color值,可以使用如下方法:


document.getElementById("header").style.backgroundColor="#ccc";


但由於float這個詞是JavaScript保留字,因此不能用object.style.float來訪問,這裡可以根據不同引擎選擇使用不同的方法。

(1)IE使用styleFloat


document.getElementById("header").style.styleFloat="left";


(2)非IE瀏覽器使用cssFloat


document.getElementById("header").style.cssFloat="left";


2.計算樣式

在JavaScript中,元素的計算樣式可以使用如下語法:


object.style.property


利用該語法可以方便地在外部訪問和修改某個CSS樣式,但該語法的限制是這些方法只能取出已設的行內樣式或直接由JavaScript設定的樣式,並不能訪問某個外部的樣式表。為了訪問元素的計算樣式,可以使用下面的代碼。

(1)IE使用currentStyle


var myObject=document.getElementById("header");

var myStyle=myObject.currentStyle.backgroundColor;


(2)非IE瀏覽器使用defaultView.getComputedStyle


var myObject=document.getElementById("header");

var myComputedStyle=document.defaultView.getComputedStyle(myObject,null);

var myStyle=myComputedStyle.backgroundColor;


3.訪問類樣式

class是JavaScript的一個保留字,因此在不同引擎中需要使用不同的方法來訪問類樣式。

(1)IE使用getAttribute("className")


var myObject=document.getElementById("header");

var myAttribute=myObject.getAttribute("className");


(2)非IE瀏覽器使用getAttribute("class")


var myObject=document.getElementById("header");

var myAttribute=myObject.getAttribute("class");


該方法也適用於setAttribute。

4.訪問for屬性

對於<label>標籤中的for屬性來說,由於for是JavaScript的保留字,因此需要使用不同的方法來分別訪問<label>標籤中的for。

(1)IE使用getAttribute("htmlFor")


var myObject=document.getElementById("myLabel");

var myAttribute=myObject.getAttribute("htmlFor");


(2)非IE瀏覽器使用getAttribute("for")


var=document.getElementById("myLabel");

var myAttribute=myObject.getAttribute("for");


5.獲取鼠標指針的位置

在Web開發中,經常需要計算鼠標指針的位置,不過不同引擎對此採取的用法和標準不同,需要分別編寫代碼進行兼容。下面代碼是最基本的,可以解釋其中的異同點。同時必須指出,它們獲取的結果相對於不同引擎會有所不同。

(1)IE使用event.clientX和event.clientY


var myCursorPosition=[0,0];

myCursorPosition[0]=event.clientX;

myCursorPosition[1]=event.clientY;


(2)非IE瀏覽器使用event.pageX和event.pageY


var myCursorPosition=[0,0];

myCursorPosition[0]=event.pageX;

myCursorPosition[1]=event.pageY;


6.獲取可見區域窗口的大小

在程序設計中,經常需要獲取瀏覽器的可見區域大小,具體代碼如下。

(1)IE


var myBrowserSize=[0,0];

myBrowserSize[0]=document.documentElement.clientWidth;

myBrowserSize[1]=document.documentElement.clientHeight;


(2)非IE瀏覽器


var myBrowserSize=[0,0];

myBrowserSize[0]=window.innerWidth;

myBrowserSize[1]=window.innerHeight;


7.Alpha透明

Alpha透明不是JavaScript句法問題,而是源於CSS的Alpha透明。不過在使用JavaScript設計淡入或淡出效果時,需要通過訪問CSS的Alpha透明設置來完成,通常使用for循環來實現。

(1)IE


var myObject=document.getElementById("myElement");

myObject.style.filter="alpha(opacity=80)";


(2)非IE瀏覽器


var myObject=document.getElementById("myElement");

myObject.style.opacity="0.5";


8.元素尺寸

IE支持「obj.style.height=imgObj.height」語句,但其他引擎對此視為無效。解決方法是為其他引擎添加單位。


obj.style.height=imgObj.height+'px';