使用Js获取元素Style中BACKGROUND-COLOR属性的RGB值和Hex值

编者：李国帅

qq：9611153 微信lgs9611153

时间：2018/10/26

背景原因:

翻看n年前的颜色拾取器，发现Hex的值没有取对，可能那时候的技术和现在不同了。

这是网上某个程序员写的，现在看来依然可以使用。

         里面涉及到如何获取每个元素的RGB和Hex颜色值，

<TD style="HEIGHT: 8px; WIDTH: 8px; BACKGROUND-COLOR: #996685"></TD>

问题相关：

         需要懂得基本的html和js知识，这也是基本的网页技术。

所需资源：

使用ie或者其他firefox等浏览器打开，查看具体的实现方式。

 

解决方案:

关键代码就是这个

function getDefaultStyle(obj,attribute){          return obj.currentStyle?obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute];   }   //事件 SelectColor.clickColorTable = function (event) {     if(event.srcElement!=null )     {         eventObj = event.srcElement;                    SelRGB = eventObj.style.backgroundColor.toUpperCase();//计算出RGB(XX,xx,xx)                    SelColor = getDefaultStyle(eventObj, 'backgroundColor');//计算出#XXXXXX     }     else     {         eventObj = event.target         SelRGB = this.GetFirefoxColorValue(eventObj.style.backgroundColor.toUpperCase());//计算出RGB(XX,xx,xx)                  SelColor = getDefaultStyle(eventObj, 'backgroundColor');//计算出#XXXXXX         colorObj.getRGB().innerHTML = nowRGB;     }     this.EndColor(); }

 

问题解决：

然后运行那个简单的颜色拾取器。如下