在前端開(kāi)發(fā)過(guò)程中往往需要?jiǎng)討B(tài)的編輯、修改一個(gè)UI的樣式，這必然涉及到style的獲取與設(shè)置裆赵。
一般都說(shuō)有圖有真相，而我們程序猿當(dāng)然是用demo來(lái)說(shuō)明一切跺嗽，下面就根據(jù)一則具體事例探討原生js獲取css樣式的方法战授。
HTML CSS
- 事例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
#div1{
width: 200px;
background:#00f;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="div1" style="height:100px;"></div>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
// div的width
console.log(oDiv.style.width);
// div的height
console.log(oDiv.style.height);
}
</script>
</body>
</html>
經(jīng)過(guò)瀏覽器運(yùn)行之后舔庶，在console控制臺(tái)很明顯有輸出。
- 第一行是空白陈醒；
- 第二行會(huì)輸出
100px惕橙。
很多人不明白是怎么回事，想要獲取的width怎么是空白钉跷。
原來(lái)是因?yàn)橹苯佑?code>oDiv.style方法只能獲取元素的內(nèi)聯(lián)樣式弥鹦，對(duì)于內(nèi)部樣式和外聯(lián)樣式，這種方法則不能取得爷辙。
因此要另尋出路彬坏，眾所周知，IE瀏覽器總是別具一格膝晾，格外奇葩栓始，所以這里還得解決兼容性問(wèn)題：
- IE瀏覽器：
var oDiv = document.getElementById('div');
var styles = oDiv.currentStyle;
styles.width;
- 其他瀏覽器：
var oDiv = document.getElementById('div');
var style = window.getComputedStyle(oDiv, null);
styles.width;
- 封裝方法：
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
提示：
- 這個(gè)方法需要傳兩個(gè)參數(shù)，
obj是將要獲取樣式的元素血当，attr則是樣式的屬性幻赚，如width、color等臊旭，調(diào)用此方法時(shí)attr必須要加上引號(hào)落恼，不然會(huì)報(bào)錯(cuò)； - 此方法只能獲取
單一屬性樣式离熏，像border佳谦、background等具有綜合屬性的樣式，只有chrome瀏覽器能獲茸檀痢钻蔑；而其他瀏覽器只能通過(guò)borderStyleColor這種駝峰命名的單一屬性來(lái)取得； - 如果使用的是jQuery奸鸯，則不需要如此操作咪笑，可直接用
$('obj').css('attr')來(lái)獲取，因?yàn)镴Q的底層就是用currentStyle[attr]和getComputedStyle(obj)[attr]這種方法進(jìn)行封裝的府喳。
參考博文：
- http://blog.csdn.net/u011043843/article/details/39811211
- http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
歡迎訪問(wèn)：個(gè)人博客地址
