快捷導(dǎo)航

JavaScript CSS修改學(xué)習(xí)第二章樣式

更新時(shí)間：2010年02月19日 14:05:33 作者：

有時(shí)候你想看看文檔的默認(rèn)樣式。比如，你的某個(gè)段落的寬度是50%，你想知道在用戶(hù)的瀏覽器中他的確切的像素是多少。

另外，有時(shí)候你也許想知道添加到一個(gè)元素或者鏈接上的樣式的具體內(nèi)容。而style屬性只能讀取元素的內(nèi)聯(lián)形式的樣式，所以如果你想讀取其他樣式就得另想辦法了。

偏移
在使用一些小技巧之前，IE和Mozilla已經(jīng)添加了一個(gè)比較好的辦法：offsetSomething。使用這些屬性你就能夠讀取這個(gè)段落現(xiàn)在的一些比較重要的樣式。
舉個(gè)例子，使用offsetWidth。你就能知道這個(gè)段落現(xiàn)在的寬度的像素值。為了測(cè)試，你可以改變一下窗口的大小然后再運(yùn)行一下。
代碼也非常的簡(jiǎn)單：

復(fù)制代碼代碼如下:

 
function getOff() 
{ 
    x = document.getElementById('test'); 
    return x.offsetWidth; 
} 

然后我們以警告框的形式顯示這個(gè)值：alert('offsetWidth = ' + getOff())。
現(xiàn)在你就得到了這個(gè)段落在用戶(hù)瀏覽器里面的像素值，就可以進(jìn)行一些運(yùn)算了。下面是一些你可以讀取的其他屬性：
offsetHeight：高度的像素值
offsetLeft：距離左邊的像素值（什么左邊？見(jiàn)下）
offsetTop：距離上面的像素值（什么上面？見(jiàn)下）
offsetWidth：寬度的像素值
注意這些屬性是只讀的，你不能直接修改。
為了方便說(shuō)明，我準(zhǔn)備了一小段代碼。首先把這個(gè)段落移過(guò)來(lái)。
然后我們給他的寬度增加100像素。如果我們這時(shí)候查看offsetWidth就會(huì)看到變化。你也可以減少100像素然后查看。
如果你在兩種瀏覽器里面查看，可能會(huì)有不同。在IE里面就是原來(lái)的寬度+100像素，但是在Mozilla里面不是。因?yàn)镸ozilla的更合乎標(biāo)準(zhǔn)一些：他只是查看內(nèi)容的寬度，而IE里面會(huì)加上邊距和邊框的寬度。雖然Mozilla的比較正確，但是我更傾向于IE的，因?yàn)楦拥闹庇^一些。
如果你不介意Mozilla/IE的兼容性的話(huà)，代碼還是很簡(jiǎn)單的：

復(fù)制代碼代碼如下:

 
function changeOff(amount) 
{ 
    var y = getOff(); 
    x.style.width = y + amount; 
} 

我們給函數(shù)傳遞要改變的值amount，然后用getOff()函數(shù)獲得原來(lái)的大小然后存儲(chǔ)在y里面，最后我們用原始大小和需要改變的值來(lái)重新確定元素的大小。
offsetWidth/Top
關(guān)于他們的定義，請(qǐng)?jiān)谏弦徽轮胁榭础?

得到樣式
我們看到offset屬性局限性很大。瀏覽器給了我們一些更加方便的訪(fǎng)問(wèn)元素樣式的方法但是不幸的是他們的可靠性和通用性不及offset。
Mozilla和Opera
Mozilla和Opera更傾向于使用css式的表達(dá)式而不是JavaScript的。比如你要得到字體大小就要使用css的font-size，而不是JavaScript的fontsize。
Mozilla支持的樣式很少。比如border[-somthing]在Mozilla里面就是空值，但是Opera能給出準(zhǔn)確的值。
IE
在IE里面我們能得到很多的樣式信息，但是我們一定要小心。在這個(gè)例子中border不起作用，你需要borderStyle，borderWidth，borderColor。
注意在JavaScript里面要方位border-width屬性必須拼寫(xiě)成borderWidth。因?yàn)檫@個(gè)連接線(xiàn)可能會(huì)被認(rèn)為是減號(hào)。
另外，IE經(jīng)常給出auto值。雖然這是真實(shí)的值，但是沒(méi)什么用。所以有時(shí)候還得使用offset。

代碼
代碼依舊很簡(jiǎn)單：

復(fù)制代碼代碼如下:

 
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和想訪(fǎng)問(wèn)的樣式名稱(chēng)

復(fù)制代碼代碼如下:

function getStyle(el,styleProp) {

然后我們把元素保存在x中：

復(fù)制代碼代碼如下:

var x = document.getElementById(el);

首先是IE的方法：元素的currentStyle屬性

復(fù)制代碼代碼如下:

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

然后給調(diào)用這個(gè)函數(shù)的程序返回y。

復(fù)制代碼代碼如下: