The example in this article describes the method by which the jquery implementation converts the obtained color value to the 16 binary form. Share to everyone for your reference. The specific analysis is as follows:
You may have noticed that in Google, Firefox and IE8 above the browser, get the color value is RGB form, such as RGB (255,255,0), feel very uncomfortable, or in the actual coding is not convenient to use, this time needs to be converted, the following provides a section of the relevant conversion code.
The specific code is as follows:
Note: After you run the editor, press F5 to refresh the page to see the demo.
The above code to achieve our requirements, RGB format can be converted to the color value of the 16 form, the following is a brief introduction to the implementation process:
I. Principle of realization:
When the click button triggers the Click event and then executes the Click event handler, which is able to write the converted color value to the Div, where the core function is Gethexbackgroundcolor (), which first determines whether the browser is under IE9, If it is a direct return color value, do not convert, because in IE9 the following browser to obtain the color value is 16, if it is IE8 above browser or Google Firefox, you need to convert, about the conversion details here is not much introduced, you can refer to code comments.
Two. Code comments:
1.$.fn.gethexbackgroundcolor=function (Id,property) {}, declares a function that can be converted to a color value that has two parameters, the first parameter is the element's id attribute value, and the second is an attribute.
2.var rgb=$ (ID). CSS (property), get the color value, this time RGB may be 16 or RGB format.
3.if ($.browser.msie&&$.browser.version>8| |$.browser.mozilla| | $.browser.webkit), to determine whether the browser is more than IE8 or Firefox or Google browser.
4.rgb=rgb.match ((\d+), \s* (\d+), \s* (\d+)/) $/), this is to understand the regular expression, through the match () function can be a color value string to generate an array of 4 elements, in the 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) {}, declaring a function that can be used to convert a color value, with a parameter, to pass an item of an RGB array.
6.return ("0" +parseint (x). toString). Slice (-2), you can convert an incoming value to 16, notice that a 0 is added, preferably using the slice function to intercept the last two characters, and return the two characters that are intercepted.
7.rgb= "#" +hex (Rgb[1]) +hex (rgb[2)) +hex (Rgb[3]) to combine values.
8.return RGB, returns the value of RGB.
9.$ (document). Ready (function () {}) to execute code in the function when the document structure is fully loaded.
10.$ ("#bt"). Click (function () {}) for the button registration click event Handling Eucalyptus.
11.$ ("#thediv"). Text ($.fn.gethexbackgroundcolor ("#thediv", "color") to write the converted color values to the div.
Three. Related reading:
1. Browser version of the judge can refer to "JavaScript to determine browser type and version."
2. The parseint () function can refer to the definition and usage analysis of the parseint () function in JavaScript.
The 3.toString () function can refer to the ToString () method Analysis of the number object in JavaScript.
The 4.slice () function can refer to the slice () method analysis of String objects in JavaScript.
5.click events can refer to the definition and usage of the Click event in jquery.
The 6.text () function can refer to jquery's text () method usage analysis.
I hope this article will help you with your jquery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
