js获取及修改网页背景色和字体色的方法
本文实例讲述了js获取及修改网页背景色和字体色的方法。分享给大家供大家参考,具体如下:
获得网页的背景色和字体颜色,方法如下:
思想:通过取得颜色属性值得到的是rgb色,不是我们想要的,所以需要将rgb色装换为十六进制色,首先获得rgb色:
代码如下:
varrgb=document.getElementById('color').style.backgroundColor;
得到格式如下:rgb(225,22,23);然后进行拆分:
代码如下:
varrgb=rgb.split('(')[1];//拆分后为[rgb,225,22,23)]形式,长度为2的数组
再将(225,22,23)字符串进行拆分(注意:只有number类型的才能转换,所以用parseInt强制转换类型!):
代码如下:
for(vark=0;k<3;k++){ str[k]=parseInt(rgb.split(',')[k]).toString(16);//str数组保存拆分后的数据 }
最后的组合:
代码如下:
str='#'+str[0]+str[1]+str[2];
完整代码如下:
<!DOCTYPEhtml> <html> <head> <title>getHexColorjs/jQuery获得十六进制颜色</title> <metacharset="utf-8"/> <scripttype="text/javascript"> functiongetHexBgColor(){ varstr=[]; varrgb=document.getElementById('color').style.backgroundColor.split('('); for(vark=0;k<3;k++){ str[k]=parseInt(rgb[1].split(',')[k]).toString(16); } str='#'+str[0]+str[1]+str[2]; document.getElementById('color').innerHTML=str; } functiongetHexColor(){ varstr=[]; varrgb=document.getElementById('color').style.color.split('('); for(vark=0;k<3;k++){ str[k]=parseInt(rgb[1].split(',')[k]).toString(16); } str='#'+str[0]+str[1]+str[2]; document.getElementById('color').innerHTML=str; } </script> <styletype="text/css"> #color{ width:200px; height:200px; line-height:200px; text-align:center; } </style> </head> <body> <divstyle="color:#88ee22;background-color:#ef8989;"id="color"></div> <inputonclick="getHexBgColor();"type="button"value="获得背景色"/> <inputonclick="getHexColor();"type="button"value="获得字体颜色"/> </body> </html>
利用javascript改变背景色的方法如下:
<bodyleftmargin=5topmargin=0onmouseover="document_onmouseover();"onclick="document_onclick();"id="all"> <SCRIPTLANGUAGE="javascript"> varcurObj=null; varcurObjmouseover=null; functiondocument_onclick(){ if(window.event.srcElement.tagName=='A'||window.event.srcElement.tagName=='FONT'){ if(curObjmouseover!=null) curObjmouseover.style.background=''; if(curObj!=null) curObj.style.background=''; curObj=window.event.srcElement; curObj.style.background='#ff0099'; } } functiondocument_onmouseover(){ if(window.event.srcElement.tagName=='A'||window.event.srcElement.tagName=='FONT'){ if(curObjmouseover!=null) {curObjmouseover.style.background=''; curObjmouseover.style.color='#000000';} if(curObj!=null) curObj.style.background=''; curObjmouseover=window.event.srcElement; curObjmouseover.style.background='#cccc00'; curObjmouseover.style.color='#ffffff'; } } </SCRIPT> <div> <ahref='#'>来自毛票票</a></div> <div><ahref='#'>来自毛票票</a></div>
希望本文所述对大家JavaScript程序设计有所帮助。