js中擷取css屬性

標籤：idt   注意事項   alert   code   current   block   function   compute   用法   

直接擷取

window.onload = function() {var but = document.getElementById(‘button‘);var div = document.getElementById(‘getStyle‘);but.onclick = function() {alert(div.style.width);//彈出空的對話方塊}}

getComputedStyle(div)方法

1. 用法

window.onload = function() {var but = document.getElementById(‘button‘);var div = document.getElementById(‘getStyle‘);but.onclick = function() {var a = document.defaultView.getComputedStyle(div);alert(a.width);//100px}}

2.注意事項

1. 擷取到的是瀏覽器計算後的樣式
2. "div.background"複合樣式，不要擷取

alert(a.background);//reb(255,0,0) none repeat sroll 0% 0% / auto padding-box border-box

用單一樣式

alert(a.backgroundColor);//red

3. 寫名字的時候不要有空格

‘div‘不可以是‘ div‘

4.不要擷取未設定的樣式，不相容

3. 解決相容性： ie8一下版本不能使用getComputedStyle方法，而要用currenrStyle方法，用currentStyle

a = div.currentStyle;alert(a.width);

js中擷取css屬性