JS怎么改变背景颜色

JavaScript019

JS怎么改变背景颜色,第1张

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>