js中獲取css屬性



在使用原生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);


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM