关于Web页中的色彩反转遇到一点问题

    颜色是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,翻转的代码为:

ExpandedBlockStart.gif ContractedBlock.gif < script  language ="javascript" > dot.gif
InBlock.gif
function InvertColor(color)
ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{
InBlock.gif     
var aryRGBs = null;
ExpandedSubBlockStart.gifContractedSubBlock.gif     
if ( /^#[a-fA-F0-9]dot.gif{3}$/.test(color) || /^#[a-fA-F0-9]dot.gif{6}$/.test(color) )
ExpandedSubBlockStart.gifContractedSubBlock.gif     
dot.gif{
InBlock.gif          
var place = 1;
InBlock.gif          
if ( color.length == 7 )
ExpandedSubBlockStart.gifContractedSubBlock.gif          
dot.gif{
InBlock.gif               place 
= 2;
ExpandedSubBlockEnd.gif          }

InBlock.gif          aryRGBs = ['', '', '']; 
InBlock.gif          color 
= color.substr(1);
InBlock.gif          
for ( var i=0 ; i < 3 ; ++i )
ExpandedSubBlockStart.gifContractedSubBlock.gif          
dot.gif{
InBlock.gif               aryRGBs[i] 
= (0xff-parseInt(color.substr(i*place, place), 16)).toString(16);
ExpandedSubBlockEnd.gif          }
     
ExpandedSubBlockEnd.gif     }

ExpandedSubBlockStart.gifContractedSubBlock.gif     
else if ( /^rgb\(\ddot.gif{1,3}(,\ddot.gif{1,3})dot.gif{2}\)$/.test(color) )
ExpandedSubBlockStart.gifContractedSubBlock.gif     
dot.gif{
InBlock.gif          
var strColor = color.substr(4, color.length-5);
InBlock.gif          
var strRGBs = strColor.split(',');
InBlock.gif          aryRGBs 
= ['', '', ''];
InBlock.gif          
for ( var i=0 ; i < 3 ; ++i )
ExpandedSubBlockStart.gifContractedSubBlock.gif          
dot.gif{
InBlock.gif               aryRGBs[i] 
= (0xff-parseInt(strRGBs[i], 16)).toString(16);
ExpandedSubBlockEnd.gif          }
     
ExpandedSubBlockEnd.gif     }

InBlock.gif     
if ( aryRGBs )
ExpandedSubBlockStart.gifContractedSubBlock.gif     
dot.gif{
InBlock.gif          
var newColor = '#';
InBlock.gif          
for ( var i=0 ; i < 3 ; ++i )
ExpandedSubBlockStart.gifContractedSubBlock.gif          
dot.gif{  
InBlock.gif               
if ( aryRGBs[i].length == 1 )
ExpandedSubBlockStart.gifContractedSubBlock.gif               
dot.gif{
InBlock.gif                     newColor 
+= '0';
ExpandedSubBlockEnd.gif               }

InBlock.gif               newColor 
+= aryRGBs[i];
ExpandedSubBlockEnd.gif          }

InBlock.gif          
return newColor; 
ExpandedSubBlockEnd.gif     }

InBlock.gif     
else
ExpandedSubBlockStart.gifContractedSubBlock.gif     
dot.gif{
InBlock.gif          
return color;
ExpandedSubBlockEnd.gif     }
 
ExpandedBlockEnd.gif}

None.gif
</ script >

    可是对于IE4.0支持的140个命名色彩28个系统命名色彩我却还没有想到简单的办法来Invertemsad.gif,暂时想到可以查表,可是一时半会要把它们根据色彩翻转关系对应上也不是件容易的事呀。

    如果您有好的转换映射方法,欢迎讨论:)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值