Summary of methods for JavaScript and CSS interactions

JavaScript is used to get pseudo-element attributes

Everyone knows how to get the CSS style value of an element through its style attribute, but can you get the attribute value of a pseudo-element? Yes, you can also use JavaScript to access pseudo-elements in the page.

// 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 in the pseudo element. This is a very useful technique if you want to create a dynamic, chic website!

ClassList API

Many JavaScript libraries have methods like addClass, removeClass, and toggleClass. To be compatible with older browsers, these libraries search for the className of an element, append and delete the class, and then update the className. There's actually a new API for adding, removing, and reversing 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 implemented the classListAPI early, and eventually IE10 implemented it.

Add and remove style rules directly to the style sheet

We are familiar with using element. Style. PropertyName to modify the style, use the JavaScript can help us to do this, but you know how to add or take an existing CSS style rules? It's pretty 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 usually used to create a new style rule, but you can also do this if you want to modify an existing rule.

Loading CSS files

Lazy loading of images, JSON, scripts, and so on is a good way to speed up your page. We can use a JavaScript loader such as curl. Js to lazy-load these external resources, but did you know that CSS stylesheets can also be lazy-loaded, and that callbacks are notified when the load succeeds?

curl(

[

"namespace/MyWidget",

"css!namespace/resources/MyWidget.css"

], 

function(MyWidget) {

//You can manipulate MyWidget 

//There is no reference to this CSS file because it is not needed; < br / >
//We just need it loaded on the page 

}

});

The PrismJS syntax highlighting script used in this site is lazy-loaded. When all the resources are loaded, the callback function fires, and I can load it in the callback function. Very useful!

CSS mouse pointer events

CSS pointer events pointer-events property is very interesting, it works very much like JavaScript, when you set this property to none, it effectively prevents the element from being disabled, you might say "so what?" , but in fact, it disables any JavaScript events or callback functions on this element!

.disabled { pointer-events: none; }

Clicking on this element, you will find that any listeners you place on this element will not trigger any events. An amazing feature, really - you no longer need to check whether a CSS class exists in case an event is triggered.

The above is my summary of 5 ways to interact with javascript and CSS, if you have a better, please let me know, this article will continue to update