js获取颜色,颜色3中类型的转换

最新推荐文章于 2026-06-11 09:23:58 发布

原创最新推荐文章于 2026-06-11 09:23:58 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #css #color #rgb #颜色格式转换

Javascript 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了如何通过JavaScript获取并解析网页元素的颜色，并展示了一段实现颜色转换和验证浏览器支持性的代码示例。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div {
height:400px;
width:400px;
border:1px solid blue;
background-color:#00F; /*rgb(255,0,0); red;*/

}
</style>
<script type="text/javascript">
var exec1 = function () {
//这段代码用以验证浏览器支持
var divnd = document.getElementById("div");
//if (divnd) {
//alert("style.backgroundColor :" + divnd.style.backgroundColor); //show null
//alert("style.currentStyle.backgroundColor :" + divnd.currentStyle.backgroundColor); //failed, chrome not support curentStyle
//alert("getStyle(divnd, backgroundColor) :" + getStyle(divnd, "background-color")); //show null
//}

//调用getStyle获取颜色
var color_value = getStyle(divnd, "background-color");

//调用parseColorRgb将获取到的颜色转换成RGB格式, 这里说明下getComputedStyle获得的就是rgb格式,而currntStyle则是style是什么就返回什么,可能为red,#FF0000,rgb(255,0,0)
//下面还有在网上找到的全部转换成#FFFFFF格式的方法parseColor(color)
var rgb_value = parseColorRgb(color_value);
alert(rgb_value);
}

//获取颜色的方法, IE支持currntStyle , FF和chrome支持getComputedStyle
function getStyle(x, styleProp) {
if (x.currentStyle)
var y = x.currentStyle[styleProp] ;
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
return y;
}

/*
[parserColor 颜色转换为rgb格式]
@param {[String]} value [需要转换的颜色值]
@return {[String]} [返回转换后的颜色值,rgb(255,255,255)形式]
*/
function parseColorRgb(value) {
var str = "",
vlen = value.length,
rgb1 = "",
rgb2 = "",
rgb3 = "",
colorObj = {
"black": "rgb(0,0,0)",
"red": "rgb(255,0,0)",
"blue": "rgb(0,0,255)",
"white": "rgb(255,255,255)",
"yellow": "rgb(255,255,0)",
"orange": "rgb(255,165,0)"
};

//输入的是rgb格式的
//rgb(0,0,255)
if (/rgb/.test(value)) {
return value;
} else if (/^#/.test(value)) { //输入的是#FFFFFF的格式
//#00f
if (vlen == 4) {
//$&表示匹配到的本身,甚少看到这样的用法,这里可当做$0
//str = value.replace(/[A-Za-z0-9]/g, "$&$&");
str = value.replace(/[A-Za-z0-9]/g, "$0$0").substr(1,6); //substr(1,6)去掉#
alert(str);
} else if (vlen == 7) {
//#FF0000
str = value.replace(/^#([A-Za-z0-9]*)/, "$1");
} else {
str = "FFFFFF";
}
//按长度划分后把三个数字取出来
alert(str.substr(0, 2));
//alert(parseInt(str.charAt(0), 16));
rgb1 = parseInt(str.substr(0, 2), 16);
rgb2 = parseInt(str.substr(2, 2), 16);
rgb3 = parseInt(str.substr(4, 2), 16);
return "rgb("+rgb1+","+rgb2+","+rgb3+")";
} else {
//red,orange
value = value.toLowerCase();
return colorObj[value] ? colorObj[value] : "rgb(255,255,255)";//不匹配默认为白色
}
}


/**
* [parserColor 颜色转换为十六进制]
* @param {[String]} value [需要转换的颜色值]
* @return {[String]} [返回转换后的颜色值,#0000FF形式]
*/
function parserColor(value) {
var
str = "",
arr = [],
arri = "",
i = 0,
vlen = value.length,
colorObj = {
"black": "000000",
"red": "0000FF",
"blue": "FF0000",
"white": "FFFFFF",
"yellow": "FFFF00",
"orange": "FFA500"
};

//rgb(0,0,255)
if (/rgb/.test(value)) {
arr = value.match(/\d+/g);
vlen = arr.length;
for (; i < vlen ; i++) {
arri = parseInt(arr[i]);
//转换为十六进制
str += arri < 10 ? "0" + arri.toString(16) : arri.toString(16);
}
} else if (/^#/.test(value)) {
//#00f
if (vlen == 4) {
str = value.replace(/[A-Za-z0-9]/g, "$&$&");
} else if (vlen == 7) {
//#FF0000
str = value.replace(/^#([A-Za-z0-9]*)/, "$1");
} else {
str = "FFFFFF";
}
} else {
//red/orange
value = value.toLowerCase();
str = colorObj[value] ? colorObj[value] : "FFFFFF";//不匹配默认为白色
}
return "#" + str.toUpperCase();
}

onload = function () {
exec1();
}
</script>
</head>
<body>
<input type="submit" id="btn" value="淡出" />
<div id="div">

</div>
</body>
</html>