jquery implements the method of converting the obtained color value into hexadecimal form_jquery

The example in this article describes how jquery converts the obtained color value into hexadecimal form. Share it with everyone for your reference. The specific analysis is as follows:

You may have noticed that in Google, Firefox and IE8 and above browsers, the color values ​​obtained are in RGB format, such as rgb(255,255,0), which feels very uncomfortable or inconvenient to use in actual coding. At this time, conversion is required, and a relevant conversion code is provided below.

The specific code is as follows:

Copy code The code is as follows:

Script Home

Note: After running the editor, press F5 to refresh the web page to view the demo.

The above code realizes our requirements and can convert color values ​​in RGB format into hexadecimal form. Here is a brief introduction to the implementation process:

1. Implementation principle:

When the button is clicked, a click event will be triggered, and the click event processing function will be executed. This processing function can write the converted color value into the div. The core function is getHexBackgroundColor(). This function will first determine the browsing Whether the browser is under IE9, if so, the color value will be returned directly without conversion, because the color value obtained by the browser below IE9 is hexadecimal. If it is a browser above IE8 or Google Firefox, conversion will be required. I won’t go into details about the conversion here. You can refer to your code comments.

2. Code comments:

1.$.fn.getHexBackgroundColor=function(id,property){}, declares a function that can convert color values. This function has two parameters. The first parameter is the id attribute value of the element. , the second one is the attribute.

2.var rgb=$(id).css(property), get the color value. At this time, rgb may be in hexadecimal or RGB format.

3.if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit), determine whether the browser is IE8 or above or Firefox or Google Chrome.

4.rgb=rgb.match(/^rgb((d ),s*(d ),s*(d ))$/), this requires some understanding of regular expressions, through the match() function The color value string can be generated into an array. There are 4 elements in this array. Take rgb(102, 0, 255) as an example. The first element is the entire color value string rgb(102, 0, 255). The second array element is 102, the third is 0, and the fourth is 255.

5. function hex(x){}, declares a function. This function can be used to convert color values. It has one parameter and passes an item of the rgb array.

6.return ("0" parseInt(x).toString(16)).slice(-2), you can convert the incoming value to hexadecimal. Note that a 0 is added in front. It is best to use slice The function intercepts the last two characters and returns the intercepted two characters.

7.rgb="#" hex(rgb[1]) hex(rgb[2]) hex(rgb[3]), combine the values.

8.return rgb, return the rgb value.

9.$(document).ready(function(){}), when the document structure is completely loaded, execute the code in the function.

10.$("#bt").click(function(){}), register click event handler for button.

11.$("#thediv").text($.fn.getHexBackgroundColor("#thediv","color")) , write the converted color value into the div.

3. Related reading:

1. To determine the browser version, please refer to "JavaScript to Determine Browser Type and Version".
2. For the parseInt() function, please refer to "Definition and Usage Analysis of parseInt() Function in JavaScript".
3. For the toString() function, please refer to "Analysis of toString() Method of Number Object in JavaScript".
4. For the slice() function, please refer to "Analysis of slice() method of String object in JavaScript".
5. For click events, please refer to "Definition and usage of click events in jQuery".
6. For the text() function, please refer to "JQuery's text() method usage analysis".

I hope this article will be helpful to everyone’s jQuery programming.