在使用原生js做開發的時候,你應該會遇到需要獲取css屬性,然后發現好像直接獲取是不行的。這里提供兩種在原生js中獲取css屬性的方法
直接獲取會失敗,舉個栗子
window.onload = function() { var but = document.getElementById('button'); var div = document.getElementById('getStyle'); but.onclick = function() { alert(div.style.width);//彈出空的對話框 } }
使用getComputedStyle(div)方法
用法示例
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 } }
注意事項
1. 獲取到的是瀏覽器計算后的樣式,如果你去獲取background,你會得到下面結果
alert(a.background);//reb(255,0,0) none repeat sroll 0% 0% / auto padding-box border-box
所以請清楚指明你要獲取的樣式,像這樣
alert(a.backgroundColor);//red
2. 寫名字的時候不要有空格
'div'不可以是' div'
3. 不要獲取未設置的樣式,不兼容
解決兼容性: ie8一下版本不能使用getComputedStyle方法,而要用currenrStyle方法
a = div.currentStyle;
alert(a.width);