Outline: We can modify the size of the element, color, position and other styles by js
1.element.style in the style of line operation
2.element.className can get the class name of the element
3.element.setAttribute ( "type", "button "); get the elements to modify elements of the inline style
4. insertRule ( rule , index ) .document.styleSheets [0] is used to obtain an external style sheet! Use myStyle.insertRule insert styleCss rule in the external style sheet
Definition and Usage insertRule () method to insert a rule in the stylesheet. Returns the value of the parameter index value. addRule () method to insert a rule stylesheet, which is a specific embodiment of the method of IE.
| parameter | description |
|---|---|
| rule | essential. To add to the style sheet rule of complete, parsed text representation.
|
| index | essential. Rules should be attached to or inserted position cssRules array. |
5. The addRule ( Selector , style , index ) .document.styleSheets [0] is used to obtain an external style sheet! Use addRule modified pseudo-class external styles cssStyle
The method is described in the array of rules specified stylesheet index inserted (or additionally) a new rule at the CSS style. This is an alternative specific criteria insertRule () method in the IE.
| parameter | description |
|---|---|
| selector | essential. CSS selector rules. |
| style | essential. Pattern matching is applied to the elements of the selector. This style string is a semicolon-separated attributes: a list of value pairs. We did not use braces to start or end. |
| index | Optional. Inserting additional rules or rule array in position. If this optional parameter is omitted out, the new rules will be added to the final rule array. |
Get a .element.style operation elements included in the style
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div id="a1"></div> <script type="text/javascript"> var a1 = document.getElementById("a1") a1.onclick = function(){ a1.style.backgroundColor = "blue"; } </script> </body> </html>
After clicking to change the style of inline style is the right style because of the heavy weight than the right style of outreach it will change
Style two operations may .element.className class name in the acquired element class = "Class Name"
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body id="myid" class="mystyle"> <script> var x=document.getElementsByTagName('body')[0]; document.write("Body 元素 CSS 类为: " + x.className); document.write("<br>"); document.write("另一种方式: "); document.write(document.getElementById('myid').className); </script> </body> </html>
Three hundred forty-five method are written in the same example below to see how practical the use! (Like the sweet spot micro-channel effect)
Here is the code: create and then use a red heart with css dom add style!
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> div{ position:relative; margin:200px auto; width: 300px; height:270px; /*background: red;*/ animation: mymove 1s linear; } div:before { content: ""; position: absolute; left: 150px; width: 150px; height: 240px; background: blue; border-radius: 150px 150px 15px 15px; transform-origin: 0 100%; transform: rotate(-45deg); } div:after{ content: ""; position: absolute; left: 0px; width: 150px; height: 240px; background: blue; border-radius: 150px 150px 15px 15px; transform-origin: 100% 100%; transform: rotate(45deg); } </style> </head> <body> <div id="a1" class="a"></div> <script type=" Text / JavaScript " > // Get outside css styles need to be added later in [Array] which is used to obtain an accurate external style var A1 = the document.styleSheets [ 0 ]; var ID = document.getElementById ( " A1 " ) the document.onclick = function () { // this method is used to add style element (inline styles) inline id.setAttribute ( " style " , " border: 10px Pink Solid; " ); // this method for operating selector and an external style sheet may also vary the value of the pseudo-class selector Waibuyangshibiao inside, attention! The weight ratio of the external style weights lower than inline style a1.addRule ( ':: before div ' , ' background: Green; Color: Red; ' ); a1.addRule ( ' div After :: ' , ' background: Green; Color: Red; ' ); // insertRule method may Waibuyangshibiao Css added a rule a1.insertRule ( " @keyframes mymove Transform {{0%: Scale (. 1); 50%} {Transform: Scale (1.2); Opacity: 0.8;} {100% Transform: Scale (. 1); }} " , . 3 ); } </ Script> </ body> </ HTML>
After the effect of this is to click and animation!
In order to facilitate the examples are written together QAQ hope you will support