5 ways to interact with JavaScript and CSS that you may not know about
- 2020-03-30 02:31:47
- OfStack
As browsers continue to improve, the line between CSS and JavaScript is blurring. They are originally responsible for completely different functions, but in the end, they are all front-end technologies that require close cooperation with each other. We all have.js and.css files in our web pages, but that doesn't mean that CSS and js can't interact independently. Here are five ways JavaScript and CSS work together that you might not know about!
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.
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:
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.
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?
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!
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.
Here are 5 ways to interact with CSS and JavaScript that you may not have discovered yet. Have you found anything new? Share it!
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.
<span style="font-size:18px;">// 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');</span>
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:
<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 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.
<span style="font-size:18px;">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");
</span>
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?
<span style="font-size:18px;">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;
//We just need it to be loaded on the page
}
});</span>
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!
<span style="font-size:18px;">.disabled { pointer-events: none; }</span>
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.
Here are 5 ways to interact with CSS and JavaScript that you may not have discovered yet. Have you found anything new? Share it!