JavaScript dynamically add CSS styles

View demo:http://koringz.github.io/addcssstyle/

CSS Cssstylesheet methods have properties and methods, first we are Console.log (Style.sheet).

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/74/56/wKiom1YaHFzyQIcGAAHZBM_wECc354.jpg "title=" 3.png " Width= "height=" 207 "border=" 0 "hspace=" 0 "vspace=" 0 "style=" WIDTH:900PX;HEIGHT:207PX; "alt=" Wkiom1yahfzyqicgaahzbm_wecc354.jpg "/> When we know the style has these methods, we can use a function to output the CSS property method once obtained.

function Addcss () { var sty = document.createelement (' style '); var h2 = document.getElementsByTagName (' h2 ') [0]; var css = ' text/css '; var gethead = Document.head | | document.getElementsByTagName (' head ') [0]; Gethead.appendchild (sty); var stysheet = Sty.sheet | | sty.stylesheet;//Gets the style sheet for the CSS labeled Style, which is the object method for level two properties Console.log (Sty.sheet); Console.log (Sty.sheet.rules); Console.log (sty.sheet.rules.length); Console.log (Sty.sheet.rules.item (0)); Console.log (Sty.sheet.cssRules); Console.log (Sty.sheet.ownerRule); Console.log (Sty.sheet.media); Console.log (Sty.sheet.type); Console.log (Sty.stylesheet); Individually set Style.stylesheet type with no style Console.log (Sty.sheet.addRule); /**/ Console.log (Sty.sheet.insertRule); /**/ Console.log (sty); Console.info (sty); Console.dir (Sty.tagname); Label name of the style return stysheet; }

var new_sheet = Addcss (); Which means new_sheet equals stylesheet.

Then, through the output CSS property to make a judgment method, how to judge the different browsers support CSS method.

function result (selector, rules, index) { index = Index | | 0; if (new_sheet.insertrule) { Span class= "Apple-tab-span" style= "WHITE-SPACE:PRE;" > new_sheet.insertrule (selector + ' {' + rules + '} ', index);  //This is a CSS level two attribute method, the details of the console " Span class= "Apple-tab-span" style= "WHITE-SPACE:PRE;" > } else{/* IE */ New_sheet.addrule (Selector,rules,index); This is the CSS two-level properties of the method, the details of the console } } Result (' H2 ', ' text-indent:25px;border:1px solid red;color:green; ')

Then we look at the page by F12 to see the effect, by looking at the elements of the CSS style, the original properties we have added already.

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/74/56/wKiom1YaH1agQXmZAAFVEZWSwL8086.jpg "title=" 4.png " alt= "Wkiom1yah1agqxmzaafvezwswl8086.jpg"/>

Want to see the source of the please git download: https://github.com/koringz/addcssstyle

This article is from the "This Is Share blog" blog, please be sure to keep this source http://kosig.blog.51cto.com/9218084/1701849

JavaScript dynamically add CSS styles