When Angel uses jQuery to obtain the value of background-color in the style, the obtained color value is displayed in a different format than that displayed in Chrome and Firefox. in IE, the color value is displayed in HEX format # ffff00, chrome and Firefox display rgb (, 0, 0) in GRB format, because the color value needs to be stored in the database, therefore, we want to unify the color value format (which is actually not uniform ). I searched and got a piece of code from a foreign website.
Copy codeThe Code is as follows:
$. Fn. getHexBackgroundColor = function (){
Var rgb = background (this).css ('background-color ');
Rgb = rgb. match (/^ rgb (d +), s * (d +), s * (d +) $ /);
Function hex (x) {return ("0" + parseInt (x). toString (16). slice (-2 );}
Return rgb = "#" + hex (rgb [1]) + hex (rgb [2]) + hex (rgb [3]);
}
Solution
The above defines a jQuery function. We can use $ ("# bg"). getHexBackgroundColor (); to obtain the RGB value of background-color with the tag id = "bg ".
The following is a small modification, that is, adding a judgment. If it is an IE browser, the value will be taken directly. If it is not an IE browser, the value will be converted to the RGB format:
Copy codeThe Code is as follows:
$. Fn. getHexBackgroundColor = function () {var rgb = partition (this).css ('background-color'); if (! $. Browser. msie) {rgb = rgb. match (/^ rgb \ (\ d +), \ s * (\ d +), \ s * (\ d +) \) $ /); function hex (x) {return ("0" + parseInt (x ). toString (16 )). slice (-2);} rgb = "#" + hex (rgb [1]) + hex (rgb [2]) + hex (rgb [3]);} return rgb ;}
JQuery obtains the attribute values in the style sheet.
Copy codeThe Code is as follows:
<Html>
<Head> <title> aaaa </title> <Script type = "text/javascript" src = "jquery-1.3.2.min.js"> </script>
<Script type = "text/javascript">
$ (Function ()
{
$ (". One> a"). click (function (){
<SPAN style = "COLOR: # ff0000"> var ba = $ (this) [0]. style. background; </SPAN> alert(((this).html () + ba );
If (ba = "url(jia1.jpg) no-repeat ")
Certificate certificate (this).css ({background: "url(jia.jpg) no-repeat "});}
Else
Certificate (this).css ({background: "url(jia1.jpg) no-repeat "});
});
});
</Script>
<Style type = "text/css">
# Left. one a {background: url(jia1.jpg) no-repeat;
Padding-left: 18px;
Padding-top: 5px;
Cursor: hand;
}
</Style>
<Body>
<Div id = "left">
<Ul>
<Li class = "one"> <a> Information Center </a>
<Ul>
<Li class = "two"> <a href = "#"> information? Case </a> </li>
<Li class = "two"> <a href = "#"> information inbox </a> </li>
</Ul>
</Li>
<Li class = "one"> <a> what should I do? </A> </li>
</Ul>
</Div>
</Body>
</Html>