软件开发培训班 >> 编程开发 >> JavaScript

得到元素真实的背景颜色的js代码

　　本文标签：元素真实的背景颜色

<html>  
<head>  
<title>得到元素真实的背景颜色</title>  
<style>  
.classname  {background-color:#ff99dd;}  
#div3  {background-color:#d8bfd8;}  
div  {background-color:#87cefa;border:1px solid #333333;margin:10px;padding:4px;}  
body  {background-color:#bed742;}  
#div4  {background-color:transparent;}  
</style>  
</head>  
<body>  
<span style="text-align:center;font-size:20px;color:#ff7f50;width:100%;">得到元素真实的背景颜色 <font style="font-size:12px;">By Longbill</font></span>  
<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 (www.longbill.cn)  
//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=1;i<=4;i++) eval("alert(div"+i+":+getBg(div"+i+"));");  
}  
</script>  
</body>  
</html>

技术文章快速查找

读jQuery之一(对象的组成)

基于jQuery的倒计时实现代码

javascript 用记忆函数快速计算递归函数

javascript 模式设计之工厂模式详细说明

解决远程页面抓取中的乱码问题？

JavaScript delete 属性的使用

js 文件引入实现代码

Jquery实现搜索框提示功能示例代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建