颜色是Web页中很重要的元素,仅次于其内容了。在网页中我们可以使用4种格式来定义颜色,他们是:已命名颜色,#rrggbb格式颜色,#rgb格式颜色和rgb(r, g, b)函数格式颜色。
颜色是Web页中很重要的元素,仅次于其内容了。在网页中我们可以使用5种方式来定义颜色,他们是:已命名颜色,#rrggbb格式颜色,#rgb格式颜色、rgb(r, g, b)函数格式颜色和rgb(x%, x%, x%)函数格式颜色。
其中的r, g, b分别为从0~255之间的数值,在#???[???]格式中,以16进制形式格式表示。在rgb(x%, x%, x%)函数格式中,x的区间是[0, 100]。当我们把同一种颜色,如:黑色。用以上四种方式赋值给HTML元素:
1、<div style="color: black">黑色</div>
2、<div style="color: #000000">黑色</div>
3、<div style="color: #000">黑色</div>
4、<div style="color: rgb(0, 0, 0)">黑色</div>
5、<div style="color: rgb(0%, 0%, 0%)">黑色</div>
这样我们可以使用div元素的currentStyle.color查询到这5种格的颜色,black、#000000、#000和rgb(0,0,0)(rgb(x%, x%, x%)会被自动转换为rgb(r, g, b)输出)。其中后三种颜色我们可以很容易的使用JScript将其Invert,翻转的代码为:

<script language="javascript">
function InvertColor(color)


{
var aryRGBs = null;

if ( /^#[a-fA-F0-9]
{3}$/.test(color) || /^#[a-fA-F0-9]
{6}$/.test(color) )

{
var place = 1;
if ( color.length == 7 )

{
place = 2;
}
aryRGBs = ['', '', ''];
color = color.substr(1);
for ( var i=0 ; i < 3 ; ++i )

{
aryRGBs[i] = (0xff-parseInt(color.substr(i*place, place), 16)).toString(16);
}
}

else if ( /^rgb\(\d
{1,3}(,\d
{1,3})
{2}\)$/.test(color) )

{
var strColor = color.substr(4, color.length-5);
var strRGBs = strColor.split(',');
aryRGBs = ['', '', ''];
for ( var i=0 ; i < 3 ; ++i )

{
aryRGBs[i] = (0xff-parseInt(strRGBs[i], 16)).toString(16);
}
}
if ( aryRGBs )

{
var newColor = '#';
for ( var i=0 ; i < 3 ; ++i )

{
if ( aryRGBs[i].length == 1 )

{
newColor += '0';
}
newColor += aryRGBs[i];
}
return newColor;
}
else

{
return color;
}
}
</script>
可是对于IE4.0支持的140个命名色彩和28个系统命名色彩我却还没有想到简单的办法来Invert
,暂时想到可以查表,可是一时半会要把它们根据色彩翻转关系对应上也不是件容易的事呀。
如果您有好的转换映射方法,欢迎讨论:)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步