|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
JS獲得div、p等標(biāo)簽元素高(height)寬(width)的方法
作者:admin 時間:2022-3-18 11:41:44 瀏覽:要用JS獲得div等元素的高寬：widht、height，不能簡單的用obj.style.width或obj.style.height來讀取，而是需要用到其他的一些函數(shù)：currentStyle()和getComputedStyle()。
如果我單給你這兩個函數(shù)方法，你可能還不知怎么使用它們。不過沒關(guān)系，下面實(shí)例足夠讓你理解清楚。
實(shí)例介紹
本實(shí)例是用JS先獲得DIV元素的寬度，然后再增加50px。
如何獲得DIV元素的寬度是程序關(guān)鍵。完整代碼如下：
<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div{
width:300px;
height:100px;
border:1px solid blue;
}
</style>
</head>
<body>
<div>
<p>
用js控制css屬性
</p>
</div>
<input type=button value="點(diǎn)擊改變div寬度" onclick="t1()" >
</body>
<script>
function getStyle(obj,attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
}
function t1()
{
var div=document.getElementsByTagName('div')[0];
div.style.width=parseInt(getStyle(div,'width'))+50+'px';
}
</script>
</html>
實(shí)例解釋
如果用JS給DIV標(biāo)簽賦值，不用通過相加減，那么很簡單，可以直接用比如下面的語句：
obj.style.width = "320px";
但是要想對DIV原width屬性值加減計算，這條語句就不適用了，因為JS并不能通過 obj.style.width 來獲取DIV元素的寬度。比如本實(shí)例，用下面的語句看看有什么結(jié)果：
var div=document.getElementsByTagName('div')[0];
alert(div.style.width);你會發(fā)現(xiàn)，彈窗是空的，沒任何數(shù)據(jù)。
所以，需要用到其他的函數(shù)，即是本實(shí)例里用到的currentStyle和getComputedStyle。
關(guān)于getComputedStyle、currentStyle、style方法的使用區(qū)別
用JS來獲取元素的CSS樣式，我們常用到getComputedStyle、currentStyle、style方法，但它們的使用場合并不一樣。
1. obj.style
這個方法JS只能獲取寫在html標(biāo)簽中的style屬性值（style=”…”），而無法獲取定義在<style type="text/css">里面的屬性值。
代碼如下：
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>JS獲取CSS屬性值</title>
<style type=”text/css”>
.ss{color:#cdcdcd;}
</style>
</head>
<body>
<div id=”css88″ class=”ss” style=”width:200px; height:200px; background:#333333″>JS獲取CSS屬性值</div>
<script type=”text/javascript”>
alert(document.getElementById(“css88″).style.width); //200px
alert(document.getElementById(“css88″).style.color); //空白
</script>
</body>
</html>
2. IE使用currentStyle，而FF使用getComputedStyle
“DOM2級樣式”增強(qiáng)了document.defaultView，提供了getComputedStyle方法。這個方法接受兩個參數(shù)：要取得計算樣式的元素和一個偽元素字符串（例如“:after”）。如果不需要偽元素信息，第二個參數(shù)可以是null。
getComputerStyle()方法返回一個CSSStyleDeclaration對象，其中包含當(dāng)前元素的所有計算的樣式。
以下面的HTML頁面為例：
<html>
<head>
<title>計算元素樣式</title>
<style>
#myDiv {
width:100px;
height:200px;
}
</style>
</hea>
<body>
<div id ="myDiv" style=" border:1px solid black"></div>
<script>
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //在某些瀏覽器中是“1px solid black”
</script>
</body>
</html>
邊框?qū)傩钥赡芤膊粫祷貥邮奖碇袑?shí)際的border規(guī)則（Opera會返回，但其它瀏覽器不會）。存在這個差別的原因是不同瀏覽器解釋綜合屬性的方式不同，因為設(shè)置這種屬性實(shí)際上會涉及很多其他的屬性。在設(shè)置border時，實(shí)際上是設(shè)置了四個邊的邊框?qū)挾取㈩伾?、樣式屬性。因此，即?code>computedStyle.border不會在所有瀏覽器中都返回值，但computedStyle.borderLeftWidth則會返回值。
需要注意的是，即使有些瀏覽器支持這種功能，但表示值的方式可能會有所區(qū)別。例如，F(xiàn)irefox和Safari會返回將所有顏色轉(zhuǎn)換成RGB格式。因此，即使getComputedStyle()方法時，最好多在幾種瀏覽器中測試一下。
IE不支持getComputedStyle()方法，但它有一種類似的概念。在IE中，每個具有style屬性的元素還有一個currentStyle屬性。這個屬性是CSSStyleDeclaration的實(shí)例，包含當(dāng)前元素全部計算后的樣式。取得這些樣式的方法差不多，如下：
var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //undefined與DOM版本的方式一樣，IE也沒有返回border樣式，因為這是一個綜合屬性。
總結(jié)
本文介紹了JS獲得div、p等標(biāo)簽元素的高(height)寬(width)的方法，通過本文的學(xué)習(xí)，我們應(yīng)該了解到JS獲取元素CSS樣式時，getComputedStyle、currentStyle、style方法的使用區(qū)別。
您可能對以下文章也感興趣
標(biāo)簽: currentStyle getComputedStyle
- 站長推薦
