1. 程式人生 > >style和getComputedStyle(ff)和currentStyle

style和getComputedStyle(ff)和currentStyle

mil defined null 屬性 document ntb script 屬性。 obj

obj.style:這個方法只能JS只能獲取寫在html標簽中的寫在style屬性中的值(style=”…”),而無法獲取定義在<style type="text/css">裏面的屬性。

IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法

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

#myDiv {
background-color:blue;
width:100px;
height:200px;
}
</style>
<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

<span style="font-family:Arial;font-size:14px;">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>

style和getComputedStyle(ff)和currentStyle