JavaScript CSS修改學習第二章 樣式

另外，有時候你也許想知道添加到一個元素或者連結上的樣式的具體內容。而style屬性只能讀取元素的內聯形式的樣式，所以如果你想讀取其他樣式就得另想辦法了。

位移
在使用一些小技巧之前，IE和Mozilla已經添加了一個比較好的辦法：offsetSomething。使用這些屬性你就能夠讀取這個段落現在的一些比較重要的樣式。
舉個例子，使用offsetWidth。你就能知道這個段落現在的寬度的像素值。為了測試，你可以改變一下視窗的大小然後再運行一下。
代碼也非常的簡單： 複製代碼 代碼如下:function getOff()
{
x = document.getElementById('test');
return x.offsetWidth;
}

然後我們以警告框的形式顯示這個值：alert('offsetWidth = ' + getOff())。
現在你就得到了這個段落在使用者瀏覽器裡面的像素值，就可以進行一些運算了。下面是一些你可以讀取的其他屬性：
offsetHeight：高度的像素值
offsetLeft：距離左邊的像素值（什麼左邊？見下）
offsetTop：距離上面的像素值（什麼上面？見下）
offsetWidth：寬度的像素值
注意這些屬性是唯讀，你不能直接修改。
為了方便說明，我準備了一小段代碼。首先把這個段落移過來。
然後我們給他的寬度增加100像素。如果我們這時候查看offsetWidth就會看到變化。你也可以減少100像素然後查看。
如果你在兩種瀏覽器裡面查看，可能會有不同。在IE裡面就是原來的寬度+100像素，但是在Mozilla裡面不是。因為Mozilla的更合乎標準一些：他只是查看內容的寬度，而IE裡面會加上邊距和邊框的寬度。雖然Mozilla的比較正確，但是我更傾向於IE的，因為更加的直觀一些。
如果你不介意Mozilla/IE的相容性的話，代碼還是很簡單的： 複製代碼 代碼如下:function changeOff(amount)
{
var y = getOff();
x.style.width = y + amount;
}

我們給函數傳遞要改變的值amount，然後用getOff()函數獲得原來的大小然後儲存在y裡面，最後我們用原始大小和需要改變的值來重新確定元素的大小。
offsetWidth/Top
關於他們的定義，請在上一章中查看。

得到樣式
我們看到offset屬性局限性很大。瀏覽器給了我們一些更加方便的訪問元素樣式的方法但是不幸的是他們的可靠性和通用性不及offset。
Mozilla和Opera
Mozilla和Opera更傾向於使用css式的運算式而不是JavaScript的。比如你要得到字型大小就要使用css的font-size，而不是JavaScript的fontsize。
Mozilla支援的樣式很少。比如border[-somthing]在Mozilla裡面就是空值，但是Opera能給出準確的值。
IE
在IE裡面我們能得到很多的樣式資訊，但是我們一定要小心。在這個例子中border不起作用，你需要borderStyle，borderWidth，borderColor。
注意在JavaScript裡面要方位border-width屬性必須拼字成borderWidth。因為這個連接線可能會被認為是減號。
另外，IE經常給出auto值。雖然這是真實的值，但是沒什麼用。所以有時候還得使用offset。

代碼
代碼依舊很簡單： 複製代碼 代碼如下:function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}

首先我們傳遞元素的ID和想訪問的樣式名稱 複製代碼 代碼如下: function getStyle(el,styleProp) {

然後我們把元素儲存在x中： 複製代碼 代碼如下: var x = document.getElementById(el);

首先是IE的方法：元素的currentStyle屬性 複製代碼 代碼如下: if (x.currentStyle) 2 var y = x.currentStyle[styleProp];
然後是Mozilla方法：使用getComputeStyle()方法，在Opera也同樣可行
[code] else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);

然後給調用這個函數的程式返回y。 複製代碼 代碼如下: return y;
}

雖然這個函數不是很完美，但是也已經力所能及了。

翻譯地址：http://www.quirksmode.org/dom/getstyles.html
轉載請保留以下資訊
作者：北玉(tw:@rehawk)