5 ways to interact with JavaScript and CSS that you don't necessarily know

There are. js files and. css files in our web pages, but this does not mean that CSS and JS are independent and cannot be interacted with. Here are the five kinds of JavaScript and CSS to work together in a way you may not know!
As the browser continues to upgrade, the boundaries between CSS and JavaScript become blurred. Originally they were responsible for completely different functions, but in the end they all belonged to the Web front-end technology, which needed to work closely with each other. There are. js files and. css files in our web pages, but this does not mean that CSS and JS are independent and cannot be interacted with. Here are the five kinds of JavaScript and CSS to work together in a way you may not know!
Get pseudo-Element (Pseudo-element) properties with JavaScript you all know how to get its CSS style values from the style property of an element, but can you get the property values of a pseudo-element (pseudo-element)? Yes, you can also access pseudo-elements in the page using JavaScript.

Get the color value of. Element:before

var color = window.getComputedStyle (
Document.queryselector ('. Element '), ': Before '

). GetPropertyValue (' color ');

Get the content value of. Element:before

var content = window.getComputedStyle (
Document.queryselector ('. Element '), ': Before '

). GetPropertyValue (' content ');

See, I can access the content property value 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, these class libraries use methods to search for classname of elements, append and delete this class, and then update classname. In fact, there is a new API that provides a way to add, remove, and Invert CSS class properties, called Classlist:

MyDiv.classList.add (' Mycssclass '); Adds a class

MyDiv.classList.remove (' Mycssclass '); Removes a class
MyDiv.classList.toggle (' Mycssclass '); Toggles a class

Most browsers implement CLASSLISTAPI early on, and eventually the IE10 realizes it.
Adding and removing style rules directly to a style sheet we are all very familiar with using Element.style.propertyName to modify the style, using JavaScript to help us do this, but do you know how to add or fix an existing CSS style rule? It's actually very simple.

function Addcssrule (sheet, selector, rules, index) {

if (sheet.insertrule) {
Sheet.insertrule (selector + "{" + Rules + "}", index);
}

else {
Sheet.addrule (selector, rules, index);
}
}

Use it!

Addcssrule (Document.stylesheets[0], "header", "Float:left");

This method is often used to create a new style rule, but you can do so if you want to modify an existing rule.
Loading a CSS file delays loading pictures, JSON, scripts, and so on is a great way to speed up page display. We can defer loading these external resources using such JavaScript loaders as curl.js, but you know that CSS stylesheets can be deferred, and the callback function notifies you when the load is successful.

Curl
[

"Namespace/mywidget",

"Css!namespace/resources/mywidget.css"

],

function (Mywidget) {

You can operate on the mywidget.

There is no reference to this CSS file, because it is not required;

All we need is that it's already loaded on the page.

}

});

The PRISMJS syntax highlighting script used on this website is deferred loading. 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 event CSS mouse pointer event pointer-events property is very interesting, it works very much like JavaScript, when you set this property to none, it can effectively prevent the prohibition of this element, you may say, "So what?" "But in fact, it is forbidden to have any JavaScript events or callback functions on this element!"

. disabled {Pointer-events:none;}

By clicking on this element, you will find that any listener you place on this element will not trigger any events. A magical feature, really--you don't need to check if a CSS class exists to prevent an event from being triggered.
This is the 5 way to interact with CSS and JavaScript that you may not have found. Do you have any new discoveries? Share it!
English Original: 5 Ways that CSS and JavaScript Interact that's not Know about.

5 ways to interact with JavaScript and CSS that you don't necessarily know