<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>获取非行内样式</title> <style> #div{width:200px;height:200px;background:#736edc;} </style></head><body> <button id="btn">点击把div颜色改成绿色</button> <div id="div"></div><script> window.οnlοad=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>