Style style operations management module can be used DOM element, the coordinates and size, style related explain this section, the operation pattern is achieved by a method css jQuery instance, there are many ways of performing the method, as follows:
- css (obj); Parameter 1 is an object representing a plurality of disposable style css
- css (name, func); 2 is a function of the parameters, setting the return value of the function
- css (name, ''); Parameter 2 is an empty string indicates remove the style (style attribute delete)
- CSS (name); ignored if the second parameter is acquired a first matching element in the style name
- css (name, value); each element is set as a pattern matching name value value.
writer by: Desert QQ: 22969969
For chestnut:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <style> div{width: 200px;height: 200px;background: #0ff;</} style > </ head > < body > < div > </ div > < Button ID = "B1" > set the background and border </ Button > < Button ID = "B2" > Remove borders </ Button > < Button ID = "B3" > Get width </ Button > < Script > $ ( ' # B1 ' ) .click (() =>{ $('div').css({background:'#ff0',border:'1px solid #f00'}) }) $('#b2').click(()=>{ $('div').css('border','') }) $('#b3').click(()=>{ $('div').text($('div').css('height') ) }) </script> </body> </html>
Results are as follows:
We set up three buttons are set through css method, delete, and get style, relatively easy to use ha
Source code analysis
Examples jquery css method implementation is as follows:
= jQuery.fn.css function (name, value) { // Get a calculated pattern element matching the first set of elements, or providing one or more on each inline style matching element. // the Setting 'undefined' IS A NO-OP IF (2 && value === === The arguments.length undefined) { return the this ; } return jQuery.access ( the this , name, value, to true , function (elem, name , value) { // call jQuery.access () to traverse a set of matched elements and perform incoming callback function on each element of the return value == undefined!? jQuery.style (elem, name, value): // if passed in the parameter is called jQuery.style () to set inline styles jQuery.css (elem, name); // else calls jQuery.css () to read the computed style }); };
Achieved through access utility functions, such parameters to support a variety of forms, access had explained in the article in html, you can look at this address: https://www.cnblogs.com/greatdesert/p/11670682.html
Source can be seen, for the internal jQuery css is achieved by static methods to achieve css style and which is in charge disposed inline style DOM element, which is used to read the value of the name element elem, follows to achieve style :
jQuery.extend ({ style: function (elem, name, value, Extra) { // read or set of inline style DOM element .elem: DOM element, name: to be read or set the style name, value: pending style set value, extra: obtaining for indicating the width, height calculated string. // the Do Not sET ON styles text Comment Nodes and IF (elem. 3 || || elem.nodeType === elem.nodeType! || elem.style. 8 ===) {! // If the node is a text node or comment text or not, but there is no comment nodes style attribute return ; // return directly without processing } // the Make Sure that WE're The right name with Working var RET, type, OrigName = jQuery.camelCase (name), styleElem.style =, = jQuery.cssHooks Hooks [OrigName]; // to set style elem.style name = jQuery.cssProps [OrigName] || OrigName; // the Check IF WE're A Setting value IF ! (Value = undefined =) { // if the incoming value of the value, the relative value is set. = type typeof value; // Convert relative Number strings (or = + - =) relative to Numbers # 7345. IF (=== type "String" && (RET = rrelNum.exec (value))) { // if the value it is a relative value string, the calculated relative value. = .. value format was + or - = .... = /^([\-+])=([\-+.\de]+)/ rrelNum, value = (+ (RET [. 1] +. 1) + RET * [2]) +parseFloat (jQuery.css (elem, name)); // Fixes bug # 9237 of the type = "Number The" ; } // the Make the Sure that NaN and null values are not the SET See: # 7116. IF (value == null | | === of the type "Number The" && isNaN (value)) { // filter null, NaN type, without any treatment, if you want to delete an inline style, pass the empty string return ; } // the If A wAS passed in Number, the Add 'PX' to the (the except for the CSS Properties Certain) IF (type === "Number" &&! jQuery.cssNumber [OrigName]) { // If the style value is a value to be set, and cssNumber the style is not defined, then the unit automatically appended px. cssNumber defined in line 6492, it is an array. + = value "PX" ; } // the If Provided WAS A Hook, use that value, otherwise Just SET The specified value IF (Hooks || ( "SET"!! in Hooks) || (value = hooks.set (elem !, value)) == undefined) { // priority call that love be corrected correction method the SET (); // Wrapped to Prevent IE throwing errors from the when 'invalid' values are Provided // Fixes bug # 5509 the try { style [name] = value; // Second set style [name] attribute. } The catch (E) {} } } }The else { // if the value parameter is not passed, the inline style is read. // the If WAS Provided GET A Hook at The non-computed value from there IF (Hooks && "GET" in Hooks && (RET = hooks.get (elem, false , Extra))! == undefined) { // priority call amended get object () correction method, and return. return RET; } // the Otherwise Just GET The value from style Object The return style [name]; // no correction method is read attribute style [name]. } })
Where we can see from the source code is incremented each time a number of attributes, such as:. $ ( "Div") css ( 'width', '+ = 20') so go cumulative width of the default unit is px.
Css to achieve the following:
jQuery.extend ({ CSS: function (elem, name, Extra) { // is responsible for reading the DOM element calculation style .elem: DOM element to be read, name: style name to be set, extra: a string, obtaining formulas for indicating the height, width. var RET, Hooks; // the Make Sure that WE Working with're the right name name = jQuery.camelCase (name); // style name camel convert hooks = jQuery .cssHooks [name]; // . Hooks directed hump style name corresponding to the correction target name = jQuery.cssProps [name] || name; // correction hump style name, if origName put name is corrected to float or cssFloat styleFloat // cssFloat Special Needs A treatment IF (name === "cssFloat") { //If the style name cssFloat name = "a float"; // is corrected to a float } // the If WAS A Hook The computed value from GET Provided there IF (Hooks && "GET" in Hooks && (RET = hooks.get (elem, to true , Extra))! == undefined) { // priority calls correction object get () correction method. return RET; // the Otherwise, IF GET A Way to EXISTS The computed value, use that } the else IF (curCSS) { return curCSS (elem, name); // other calls curCSS (elem, name) reading computed style. Defined in the line 6765 } }, })
curCSS jQuery function is defined inside a tool for acquiring a pattern, to achieve the following:
curCSS = getComputedStyle || currentStyle;
Default to the getComputedStyle (window.getComputedStyle present case, IE and other browsers), the currentStyle embodiment is a compatible internal jQuery another implementation, not discussed, to achieve the getComputedStyle follows:
IF (document.defaultView && document.defaultView.getComputedStyle) { // in IE9 + and other browsers. If there is window.getComputedStyle property. document.defaultView ie the window object. = the getComputedStyle function (elem, name) { // // define the getComputedStyle () function var RET, defaultView, computedStyle; name = name.replace (RUPPER, "- $. 1") .toLowerCase (); // the potential hump formula CCTV names are converted to hyphens style. = RUPPER / ([AZ] | ^ MS) / G, IF ((defaultView = elem.ownerDocument.defaultView) && (computedStyle = defaultView.getComputedStyle (elem, null ))) { // defaultView i.e. window object calls window.getComputedStyle () method to get the set of nodes style RET = computedStyle.getPropertyValue (name); // call getPropertyValue () method to get the value of the name of the style. IF (RET === "" &&! jQuery.contains (elem.ownerDocument.documentElement, elem)) { // If the pattern did not get to the calculation, and the document is no longer current element ret = jQuery.style (elem, name) ; // call jQuery.style () reads inline styles. } } Return RET; }; }
JQuery code can be seen by a prior call window.getComputedStyle () Gets the style of the property.