a talk about the operationCssstyle Many people will thinkJQueryof theCSSMethod:$ (selector). CSS (name), but have thought about how to use the nativeJavascriptto implement a similar function? What this article shares with you is the use of native JavaScriptImplementCSSstyle related content, take a look at it, hope to everyoneLearningJavaScript has helped.The people most familiar with the nativeJsmethods of manipulating styles are notDOMin theStyleobject, but this method can only be obtained and modifiedHTMLinline style in document, cannot manipulate non-inline styles (inner style and external style sheet). By searching and collating, I summarize the use of nativeJStheCSSthe read-write implementation of the style. Get Style 1. Dom StyleThis method can only get inline styles: var text = document.getElementById (' text '); var textcolor = Text.style.color; //GetTextColorthe value is' #000 ' 2. CurrentstyleThis method applies only toIebrowser, in form withElement.styleSimilar, the difference is that asCurrentstyleits name--the current style (CSSloaded style), returns the element's current finalCSSproperty values, including the internalstylethe style in the tag and the external introductionCSSfile. Usage: Elements. Currentstyle.PropertiesFor example, we want to getIdto beBoxof thewidth: var boxwidth = document.getElementById (' box '). Currentstyle.width; //GetBoxwidththe value is' 200px ' 3. getComputedStyle getComputedStyleis a can get the current element all the end use of theCSSThe value of the property. Returned is aCSSStyle Declaration Object([Object cssstyledeclaration]), and is read-only. for compatibility, basic support:Chrome,Firfox,IE9,Opera,SafariUsage:getComputedStyle (Elements, Pseudo class).property, the second parameter, if it is not a pseudo-class, is set toNULLit. var el = document.getElementById ("box"); var style = window.getComputedStyle (El, ": after"); to encapsulate a generic function that gets the styleto apply to major mainstream browsers, let's write a function: //This function needs to pass two parameters: element object and Style property name function GetStyle (el, StyleName) { if (El.currentstyle) { For IE return El.currentstyle[stylename]; } else { For peace Return getComputedStyle (EL, false) [stylename]; } }then call this function to getBoxThe width: var box = document.getElementById ("box"); var boxwidth = getStyle (box, ' width ');This function does not take into account the related operation of the pseudo-class, can be expanded as needed getComputedStylewith thestylethe difference? since it's all about getting the values of the style properties, what's the difference between them: 1.read-only and writable getComputedStylemethod is read-only and can only get styles and cannot be set, butElement.styleAble to read and write. 2.gets the range of objects getComputedStylemethod gets all of the final application on the elementCSSProperty Object (even if noCSScode, will show the default ancestor eight generations);Element.stylecan only get elementsstyleproperty in theCSSstyle. So for a bare element,getComputedStylemethod returns the object in thelengthThe property value (if any) is190+ (As far as I'm testedff:192, ie9:195, chrome:253,different environmental outcomes may vary), andElement.styleis that0. Set Style 1. Dom StyleThis is needless to say, such as changing the background color of the element to red: var el = document.getElementById (' box '); El.style.backgroundColor = ' red '; 2. CsstextProperties Csstextthe essence is to setHTMLElements ofstyleThe value of the property. It is a text representation of a set of style properties and their values. This text is formatted as aCSSstyle sheet, which removes the curly braces that enclose the element selector for attributes and values. It's usage andInnerHTMLsimilar:document.getElementById ("D1"). Style.csstext = "color:red; font-size:13px; ";
Source:Goku's Blog
How do I read and write CSS styles using native JavaScript?
