JS to obtain and modify the Web page background color and font color method _javascript Tips

Source: Internet
Author: User
Tags tagname

This article is an example of JS to obtain and modify the Web page background color and font color methods. Share to everyone for your reference, specific as follows:

Get the background color and font color of the Web page as follows:

Thought: By getting the color attribute is worth to the RGB color, not what we want, so you need to change the RGB color to hexadecimal color, first get RGB color:

The code is as follows:

Copy Code code as follows:
var RGB = document.getElementById (' color '). Style.backgroundcolor;

The resulting format is as follows: RGB (225, 22, 23); And then split the break:

The code is as follows:

Copy Code code as follows:
var RGB = Rgb.split (' (') [1];////[RGB, 225,22,23)] form, array of length 2

The (225,22,23) string is then split (note: Only the number type can be converted, so use parseint to cast the type!). ) :

The code is as follows:

for (var k = 0; k < 3; k++) {
Str[k] = parseint (RGB. Split (', ') [K]). toString;//str array save split data
}

The final combination:

The code is as follows:

Copy Code code as follows:
str = ' # ' +str[0]+str[1]+str[2];

The complete code is as follows:

<! DOCTYPE html>  

The

Use JavaScript to change the background color is as follows:

<body leftmargin=5 topmargin=0 onmouseover= "document_onmouseover ();"
Onclick= "Document_onclick ();" id= "All" > <script language= "javascript" > var curobj= null;
var curobjmouseover=null; function Document_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 '; }} function Document_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> <a href= ' # ' > from Cloud Habitat </a> </div> <div> <a href= ' # ' > From Cloud HabitatDistrict </a> </div>

 

I hope this article will help you with your JavaScript programming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.