5 ways you may not know about JavaScript and CSS interaction

  Web pages have. js files and. css files, but this does not mean that the CSS and JS are independent of the interaction, the following share JS and CSS interaction 5 ways

As browsers continue to upgrade, the boundaries between CSS and JavaScript become blurred. Originally they were responsible for completely different functions, but in the end, they all belong to the Web front-end technology, they need to work closely with each other. Our web pages have both. js files and. css files, but this does not mean that CSS and JS are independent and cannot interact. Here are five JavaScript and CSS ways to work together you may not know!     Get pseudo Element (Pseudo-element) properties with JavaScript     Everyone knows how to get a CSS style value from an element's style property, but it gets the pseudo element ( Pseudo-element) property value? You can also use JavaScript to access pseudo elements in the page.     Code as follows: <span style= "FONT-SIZE:18PX;" >//get the color value of .element:before  var color = window.getComputedStyle (  document.queryselector ('. E Lement '), ': Before '  ). GetPropertyValue (' color ');   //Get the content value of .element:before  var Content = window.getComputedStyle (  document.queryselector ('. Element '), ': Before '  ). GetPropertyValue (' Content ');</span>    See, I can access the content attribute values in the pseudo element. If you want to create a dynamic, style chic website, this is a very useful technology!     Classlist api    A lot of JavaScript tool libraries have Addclass,removeclass and Toggleclass methods. In order to be compatible with older browsers, the methods used in these libraries are to search the classname of the element first, append and delete the class, and then update the classname. There is actually a new API that provides add, delete, and invert CSS classesThe method of the property, called the classlist:  Code, is as follows: <span style= "FONT-SIZE:18PX;" >mydiv.classlist.add (' Mycssclass '); Adds a class  myDiv.classList.remove (' Mycssclass '); Removes a class  myDiv.classList.toggle (' Mycssclass '); Toggles a class</span>    most browsers implemented CLASSLISTAPI very early, and in the end IE10 also realized it.     Add and delete style rules directly to style sheets     We're all very familiar with using Element.style.propertyName to modify styles, and using JavaScript can help us do that, but do you know how to add or fix an existing CSS style rule? It's actually very simple.   Copy code code as follows: <span style= "FONT-SIZE:18PX;" >function addcssrule (sheet, selector, rules, Index) {  (sheet.insertrule) {  Sheet.insertrule (selector + "{" + Rules + "}", index); }  else {  sheet.addrule (selector, rules, index); } } //Use it!  Addcssrule (document.stylesheets[0], "header", "Float:left");  </span>    This method is usually used to create a new style rule, but you can do so if you want to modify an existing rule.     Loading CSS files     deferred loading pictures, JSON, scripts, etc. are a good way to speed up the page display. We can use the JavaScript loader such as curl.js to delay loading these external resources, but youKnow that CSS stylesheets can also be deferred, and the callback function will be notified when the load succeeds.   Copy code code as follows: <span style= "FONT-SIZE:18PX;" >curl (  [  "Namespace/mywidget",  "css!namespace/resources/mywidget.css"  ],  function ( Mywidget) { //You can operate on mywidget  //There is no reference to this CSS file because there is no need to; //We just need it to be loaded onto the page  } }); </ span>    When all the resources are loaded, the callback function is triggered and I can load it in the callback function. Very useful!     CSS mouse pointer events     CSS mouse pointer events pointer-events properties very interesting, it works very much like JavaScript, when you set this property to None, It can effectively prevent this element from being banned, and you might say, "How about this?" "But, in fact, it is prohibited by any JavaScript event or callback function on this element!"   Copy code code as follows: <span style= "FONT-SIZE:18PX;" >.disabled {pointer-events:none;} </span>    Click on this element and you will find that any listener you put on this element will not trigger any events. A magical feature, really-you don't need to check whether a CSS class exists in order to prevent an event from being triggered.     is the 5 way to give you the CSS and JavaScript interaction that you may not have found yet. Do you have any new discoveries? Share it out!