关于Web页中的色彩反转遇到一点问题
来源:互联网 发布:投影融合软件下载 编辑:程序博客网 时间:2024/06/05 18:04
颜色是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>
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,暂时想到可以查表,可是一时半会要把它们根据色彩翻转关系对应上也不是件容易的事呀。
如果您有好的转换映射方法,欢迎讨论:)
- 关于Web页中的色彩反转遇到一点问题
- 《关于SDL中的色彩键控》
- 关于Request.Url使用遇到的一点问题
- 遇到的关于ifstream::eof()的一点小问题
- 关于 VS2010 使用中遇到的一点小问题
- 本人遇到的关于namespace的一点小问题总结
- 关于在测试组遇到问题的一点想法
- 关于ActivityGroup使用过程中遇到的一点问题
- 关于ActivityGroup使用过程中遇到的一点问题
- 关于JAVA中split()函数遇到的一点问题
- 关于BaiduMapSDK遇到的问题的一点总结
- 关于Python2的一点想法以及遇到的问题
- 关于Spring websocket 开发中遇到的一点问题
- 关于web项目中的程序调试(为了记住自己遇到的问题,慢慢增加)
- 关于画布反转问题
- 关于web中的一个问题
- 谈谈关于网页设计中的色彩理论
- 关于色彩管理的若干个问题
- 使用混合脚本编程来实现的Base64编码
- 程序员的七种武器
- 使用TextRange获取输入框中光标的位置
- PS逃离画框
- 使用混合脚本编程来实现的Base64解码
- 关于Web页中的色彩反转遇到一点问题
- JScript版CollectionBase类的一个实现
- 用脚本为本blog增加了几项自定义功能
- 设计有复杂客户端Script的服务器控件
- 用宏使应用程序只启动一次
- 兼容值类型的JavaScript对象Clone方法
- 通过n次循环获得n个自然数随机排序
- "舍简求繁"的MSN Spaces图片浏览器
- RealSystem SDK