<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取非行内样式</title>
<style>
#div{200px;height:200px;background:#736edc;}
</style>
</head>
<body>
<button id="btn">点击把div颜色改成绿色</button>
<div id="div"></div>
<script>
window.onload=function(){
var oDiv = document.getElementById('div');
var Btn = document.getElementById('btn');
// 获取计算后的样式（最终样式/当前样式）
function getStyle(obj,attr){
if(obj.currentStyle){//ie
return obj.currentStyle[attr];
}else{//ff
return getComputedStyle(obj,false)[attr];
}
}
console.log(getStyle(oDiv,'backgroundColor'));//rgb(115, 110, 220)
// 获取/设置样式
function css(obj,attr,value){
if(arguments.length == '2'){//获取
return getStyle(obj,attr);
}else if(arguments.length == '3'){//设置
return obj.style[attr]=value;
}
}
Btn.onclick = function(){
css(oDiv,'backgroundColor','green')
}
}
</script>
</body>
</html>