在對網頁進行調試的過程中，經常會用到js來獲取元素的CSS樣式，方法有很多很多，現在僅把我經常用的方法總結如下：
1. obj.style：這個方法只能JS只能獲取寫在html標簽中的寫在style屬性中的值（style=”…”），而無法獲取定義在<style type="text/css">里面的屬性。
復制代碼 代碼如下:
<span><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ““>
<html xmlns=”“>
<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> </span>
復制代碼 代碼如下:
<span><!DOCTYPE html>
<html>
<head>
<title>計算元素樣式</title>
<style>
#myDiv {
background-color:blue;
width:100px;
height:200px;
}
</style>
<body>
<div id ="myDiv"></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>
</head>
</html></span>
復制代碼 代碼如下:
<span>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</span>
復制代碼 代碼如下:
<span>function getCSS(div){
return document.defaultView.getComputedStyle(div, null);
//return div.currentStyle;//沒用過，IE
}</span>
新聞熱點
疑難解答
圖片精選
