js如何獲取css屬性

小編給大家分享一下js如何獲取css屬性，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

js獲取css屬性的方法：使用【getComputedStyle(div)】方法獲取，代碼為【var a = document.defaultView.getComputedStyle(div);】。

js獲取css屬性的方法：

在使用原生js做開發(fā)的時(shí)候，你應(yīng)該會遇到需要獲取css屬性，然后發(fā)現(xiàn)好像直接獲取是不行的。這里提供兩種在原生js中獲取css屬性的方法

直接獲取會失敗，舉個(gè)栗子

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

注意事項(xiàng)

1. 獲取到的是瀏覽器計(jì)算后的樣式，如果你去獲取background,你會得到下面結(jié)果

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

所以請清楚指明你要獲取的樣式，像這樣

alert(a.backgroundColor);//red

2. 寫名字的時(shí)候不要有空格

'div'不可以是' div'

3. 不要獲取未設(shè)置的樣式，不兼容

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

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

看完了這篇文章，相信你對js如何獲取css屬性有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！