IE/FireFox/Chrome 取style.backgroundColor 兼容性问题

最新推荐文章于 2022-06-16 10:00:16 发布

JasonYao

最新推荐文章于 2022-06-16 10:00:16 发布

阅读量3.8k

点赞数

分类专栏：错误汇总及解决办法 JavaScript/AJAX 文章标签： hex 浏览器 jquery chrome function 框架

错误汇总及解决办法同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

JavaScript/AJAX

12 篇文章 0 订阅

订阅专栏

参考地址：http://www.zhangxinxu.com/wordpress/2010/03/javascript-%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6%E4%B8%8Ergb%E9%A2%9C%E8%89%B2%E5%80%BC%E7%9A%84%E7%9B%B8%E4%BA%92%E8%BD%AC%E6%8D%A2/

最近在做产品的跨浏览器支持，也不用第三方框架如jquery之类的。开发过程中遇到一个取背景色不兼容的问题。

在IE浏览器中，使用style.backgroundColor 返回的值是用16进制表示的，比如红色那么返回： #FF0000，

但是在FF 和 Chrome下面返回的值却是RGB类型的，红色返回如下： rgb(255,0,0).

现在需要统一返回结果，参考上面的地址，使用了作者提供的把 RGB 转成16进制的方法，问题解决。

String.prototype.colorHex = function(){
		var that = this;
		var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
		if(/^(rgb|RGB)/.test(that)){
			var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
			var strHex = "#";
			for(var i=0; i<aColor.length; i++){
				var hex = Number(aColor[i]).toString(16);
				if(hex === "0"){
					hex += hex;	
				}
				strHex += hex;
			}
			if(strHex.length !== 7){
				strHex = that;	
			}
			return strHex;
		}else if(reg.test(that)){
			var aNum = that.replace(/#/,"").split("");
			if(aNum.length === 6){
				return that;	
			}else if(aNum.length === 3){
				var numHex = "#";
				for(var i=0; i<aNum.length; i+=1){
					numHex += (aNum[i]+aNum[i]);
				}
				return numHex;
			}
		}else{
			return that;	
		}
};