js——行間樣式與非行間樣式
阿新 • • 發佈：2019-02-13
對於行間樣式與非行間樣式，這裡做一下總結，方便大家查閱。
首先提下兩個概念：行間樣式與非行間樣式
行間樣式：行間樣式就是寫在標籤體內的樣式：如，<div style="color:red"></div>，在這裡color樣式就是行間樣式。
非行間樣式：非行間樣式就是指不是寫在標籤體內的style屬性的樣式。如<style>....</style>內的定義的樣式或引用的外部css檔案都是非行間樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行間樣式與非行間樣式</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{ font-size:20px; color:black;}
</style>
</head>
<body>
<div id="box" style="color:red;">China</div>
</body>
<script>
//js程式碼
</script>
</html> js中獲取CSS樣式有以下兩種方法：
1、獲取行間樣式 （可讀可寫）
var oBox = document.getElementById('box');
console.log(oBox.style.color); // red
console.log(oBox.style.fontSize); // '' obj.style[attr] 只能獲取行間樣式，不能獲取非行間樣式
oBox.style.color = 'black'; 2、獲取非行間樣式 只讀 (返回的是當前元素應用的最終CSS屬性值（包括外鏈CSS檔案，標籤中嵌入的style屬性等）)
function getStyle(obj,attr){ //獲取非行間樣式，obj是物件，attr是值
if(obj.currentStyle){ //針對ie獲取非行間樣式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //針對非ie
};
}; 3、行間樣式（ele.style） 與 非行間樣式（getComputedStyle或currentStyle） 的區別
a、ele.style 只能讀取行間樣式，而getComputedStyle或currentStyle獲取的是 元素最終的css樣式；
b、ele.style 是可讀可寫的，而getComputedStyle或currentStyle 是隻讀的；
console.log(getStyle(oBox,'color'))
參考連結：
http://www.jb51.net/article/92551.htm
http://www.cnblogs.com/JamKong/p/4967815.html
http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/