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