1、首先我们来创建一个p元素，在里面写上hello:。
2、在浏览器界面上的显示如下。
3、接下来我们就为这个p元素来设置背景颜色。
4、接下来看看浏览器中变化。
5、说明我们就已经为p元素改好了背景色，如果要改变颜色的话直接在后面改就好。
javascript的style属性只能获取内联样式，对于外部样式和嵌入式样式需要用currentStyle属性。但是，currentStyle在FIrefox和Chrome下不支持，需要使用如下兼容性代码
HTMLElement.prototype.__defineGetter__("currentStyle", function () {return this.ownerDocument.defaultView.getComputedStyle(this, null)
})
接下来就可以直接使用currentStyle属性来获取元素的样式了，下面实例演示获取页面body的背景色：
1、HTML结构
<input type='button' value='点击按钮获取页面背景色' onclick="fun()"/>2、CSS样式
body{background: RGB(222,222,2)}3、javascript代码
HTMLElement.prototype.__defineGetter__("currentStyle", function () {return this.ownerDocument.defaultView.getComputedStyle(this, null)
})
function fun(){
var color = document.body.currentStyle.backgroundColor
alert(color)
}
4、效果演示
1、这个函数来自Rico，Longbill及Dnew.cn修改。
2、说明: 传入参数一个，为元素的id值或元素本身，返回为元素的真实背景色值（字符串）。背景值均为16进制的值（原代码是是IE里面返回的是16进制的值，而Mozilla则是rgb值，Dnew.cn将其修改为均返回16进制的值）。
3、代码如下：
<html><head>
<title>得到元素真实的背景颜色</title>
<style>
.classname {background-color:#ff99dd}
#div3 {background-color:#d8bfd8}
div {background-color:#87cefaborder:1px solid #333333margin:10pxpadding:4px}
body {background-color:#bed742}
#div4 {background-color:transparent}
</style>
</head>
<body>
<span style="text-align:centerfont-size:20pxcolor:#ff7f50width:100%">得到元素真实的背景颜色 <font style="font-size:12px">By <a href=
<div id='div1'>div1 直接通过div标签定义背景色(#87cefa)</div>
<div id='div2' class=classname>div2 通过class name定义背景色(#ff99dd)</div>
<div id='div3'>div3 通过id定义背景色(#d8bfd8)</div>
<div id='div4'>div4 这是一个透明的div，背景色应为上一个元素的颜色(#bed742)</div>
<button onclick="go()">getBg()</button>
<script>
function getBg(element)
{//author: Longbill (
)
//dnew.cn修补
var rgbToHex=function(rgbarray,array){
if (rgbarray.length < 3) return false
if (rgbarray.length == 4 && rgbarray[3] == 0 && !array) return 'transparent'
var hex = []
for (var i = 0 i < 3 i++){
var bit = (rgbarray[i] - 0).toString(16)
hex.push((bit.length == 1) ? '0' + bit : bit)
}
return array ? hex : '#' + hex.join('')
}
//---------------
if (typeof element == "string") element = document.getElementById(element)
if (!element) return
cssProperty = "backgroundColor"
mozillaEquivalentCSS = "background-color"
if (element.currentStyle)
var actualColor = element.currentStyle[cssProperty]
else
{
var cs = document.defaultView.getComputedStyle(element, null)
var actualColor = cs.getPropertyValue(mozillaEquivalentCSS).match(/\d{1,3}/g)
//-----
actualColor = (actualColor) ? rgbToHex(actualColor) : "transparent"
}
if (actualColor == "transparent" && element.parentNode)
return arguments.callee(element.parentNode)
if (actualColor == null)
return "#ffffff"
else
return actualColor
}
function go()
{
for(var i=1i<=4i++) eval("alert('div"+i+":'+getBg('div"+i+"'))")
}
</script>
</body>
</html>
