基本代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
color:yellow;
}
</style>
</head>
<body>
<div style="width:100px;height:100px;background-color:red">This is div</div>
</body>
</html>
1.通過使用element.style屬性來獲取
<script>
var div = document.getElementsByTagName("div")[0];
console.log(div.style.color); //""
console.log(div.style.backgroundColor); //red
</script>
element.style屬性只能獲取行內樣式，不能獲取<style>標簽中的樣式，也不能獲取外部樣式
由於element.style是元素的屬性，我們可以對屬性重新賦值來改寫元素的顯示。
<script>
var div = document.getElementsByTagName("div")[0];
div.style['background-color'] = "green";
console.log(div.style.backgroundColor); //green
</script>
2.通過getComputedStyle和currentStyle來獲取樣式
getComputedStyle的使用環境是chrome/safari/firefox IE 9,10,11
<script>
var div = document.getElementsByTagName("div")[0];
var styleObj = window.getComputedStyle(div,null);
console.log(styleObj.backgroundColor); //red
console.log(styleObj.color); //yellow
</script>
currentStyle在IE裡能得到完美支持，chrome不支持，ff不支持
<script>
var div = document.getElementsByTagName("div")[0];
var styleObj = div.currentStyle;
console.log(styleObj.backgroundColor); //red
console.log(styleObj.color); //yellow
</script>
3.ele.style和getComputedStyle或者currentStyle的區別
3.1 ele.style是讀寫的，而getComputedStyle和currentStyle是只讀的
3.2 ele.style只能得到行內style屬性裡面設置的CSS樣式，而getComputedStyle和currentStyle還能得到其他的默認值
3.3 ele.style得到的是style屬性裡的樣式，不一定是最終樣式，而其他兩個得到的是元素的最終CSS樣式
4.獲取樣式兼容性寫法
<script>
//獲取非行間樣式(style標簽裡的樣式或者link css文件裡的樣式)，obj是元素，attr是樣式名
function getStyle(obj,attr){
//針對IE
if(obj.currentStyle){
return obj.currentStyle[attr]; //由於函數傳過來的attr是字符串，所以得用[]來取值
}else{
//針對非IE
return window.getComputedStyle(obj,false)[attr];
}
}
/*
獲取或者設置css屬性
*/
function css(obj,attr,value){
if(arguments.length == 2){
return getStyle(obj,attr);
}else{
obj.style[attr] = value;
}
}
</script>
5.window.getComputedStyle(ele[,pseudoElt]);
第二個參數如果是null或者省略，則獲取得到是ele的CSSStyleDeclaration對象
如果是一個偽類，則獲取到的是偽類的CSSStyleDeclaration對象
<style>
div{
width:200px;
height:200px;
background-color:#FC9;
font-size:20px;
text-align:center;
}
div:after{
content:"This is after";
display:block;
width:100px;
height:100px;
background-color:#F93;
margin:0 auto;
line-height:50px;
}
</style>
<body>
<div id='myDiv'>
This is div
</div>
<input id='btn' type="button" value='getStyle'/>
<script>
var btn = document.querySelector('#btn');
btn.onclick = function(){
var div = document.querySelector('#myDiv');
var styleObj = window.getComputedStyle(div,'after');
console.log(styleObj['width']);
}
</script>
</body>
6.getPropertyValue獲取CSSStyleDeclaration對象中的指定屬性值
<script>
var div = document.getElementsByTagName("div")[0];
var styleObj = window.getComputedStyle(div,null);
console.log(styleObj.getPropertyValue("background-color"));
</script>
getPropertyValue(propertyName);中的propertyName不能是駝峰式表示
obj.currentStyle['margin-left'] 有效
obj.currentStyle['marginLeft'] 有效
window.getComputedStyle(obj,null)['margin-left'] 有效
window.getComputedStyle(obj,null)['marginLeft'] 有效
window.getComputedStyle(obj,null).getPropertyValue('margin-left') 有效
window.getComputedStyle(obj,null).getPropertyValue('marginLeft') 無效
obj.currentStyle.width 有效
obj.currentStyle.background-color 無效
obj.currentStyle.backgroundColor 有效
window.getComputedStyle(obj,null).width 有效
window.getComputedStyle(obj,null).background-color 無效
window.getComputedStyle(obj,null).backgroundColor 有效
綜上，就是帶有"-"的屬性不能直接點出來，所以有getPropertyValue方法來處理，但是可以用[]來取代getPropertyValue
7.defaultView
在許多在線的演示代碼中, getComputedStyle 是通過 document.defaultView 對象來調用的。 大部分情況下，這是不需要的， 因為可以直接通過window對象調用。但有一種情況，你必需要使用 defaultView, 那是在firefox3.6上訪問子框架內的樣式 (iframe)
以上這篇JS之獲取樣式的簡單實現方法(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。