jquery implements the method of converting the obtained color value to hexadecimal form
- 2020-05-07 19:14:12
- OfStack
This article illustrates an jquery implementation that converts the obtained color value into base 106 form. Share with you for your reference. Specific analysis is as follows:
As you may have noticed, in Google, firefox, and IE8 + browsers, the color values obtained are in the form of RGB, such as rgb (255,255,0), which feels very uncomfortable or is not easy to use in the actual coding. At this time, conversion is required.
The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title> Color format conversion - The home of the script </title>
<style type="text/css">
#thediv
{
width:200px;
height:100px;
background-color:#CCC;
line-height:100px;
text-align:center;
color:#60F;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$.fn.getHexBackgroundColor=function(id,property)
{
var rgb=$(id).css(property);
if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit)
{
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;
}
$(document).ready(function(){
$("#bt").click(function(){
$("#thediv").text($.fn.getHexBackgroundColor("#thediv","color"))
})
})
</script>
</head>
<body>
<div id="thediv"> The home of the script </div>
<input type="button" value=" Click to view " id="bt" />
</body>
</html>Note: after running the editor, press F5 to refresh the page to view the demo.
The above code has realized our requirements, and the color value in RGB format can be converted to the base 106 form. The following is a brief introduction of the implementation process:
1. Implementation principle:
When click on the button will trigger the click events, and then execute click event handler, the handler can write div color value after the conversion, which is the core function of getHexBackgroundColor (), the function is first to determine whether the browser IE9, if is the direct return to the color value, does not transform, because under IE9 browser for color value is the hexadecimal, if is IE8 above browser or Google firefox, you will need to convert, details about conversion introduced here is not much, Refer to your code comments.
2. Code comments:
1.$.fn.getHexBackgroundColor =function(id,property){}, declare 1 function, this function can perform color value conversion, this function has two parameters, the first parameter is the element's id attribute value, the second is an attribute.
2.var rgb=$(id).css(property), get the color value.
3.if($.browser.msie&&$.browser.version > 8||$.browser.mozilla ||$.browser.webkit), determine whether the browser is IE8 or above or is firefox or Google browser.
4.rgb= rgb.match (/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/), this is to understand the regular expression, match() function can be used to generate an array of color value string, this array has four elements, rgb(102, 0, 255) as an example, the first element is the entire color value string rgb(102, 0, 255), The second element is 102, the third element is 0, and the fourth element is 255.
5.function hex(x){}, declare 1 function, this function can be used to perform color value conversion, has 1 parameter, is passed in the rgb array 1 item.
6.return ("0"+parseInt(x).toString(16)).
7.rgb="#"+hex(rgb[1])+hex(rgb[2])+hex(rgb[3]).
8.return rgb, returns the value rgb.
$(document).ready (function(){}), when the document structure is fully loaded, execute the code in the function.
10.$("#bt").click(function(){}), register click event for button processing eucalyptus.
11.$("#thediv").text ($.fn.getHexBackgroundColor ("#thediv","color")), writes the converted color value to div.
3
1. For browser version determination, please refer to JavaScript for browser type and version determination.
2. The parseInt() function can be seen in the definition and usage analysis of parseInt() function in javascript.
3. The toString() function can be seen in the toString() method analysis of Number objects in javascript.
4. The slice() function can be seen in the slice() method analysis of String objects in javascript.
5. For click events, please refer to the definition and usage of click events in jQuery.
6. The text() function can be seen in jQuery's text() method usage analysis.
I hope this article has been helpful to your jQuery programming.