As browsers continue to upgrade and improve, the boundaries between CSS and JavaScript are becoming increasingly blurred. Originally they were responsible for completely different functions, but in the end, they all belong to web front-end technology and they need to work closely with each other. Our web pages have .js and .css files, but this does not mean that CSS and js are independent and cannot interact. You may not know these five ways of working together with JavaScript and CSS that you want to talk about below!
Use JavaScript to get pseudo-element attributes
Everyone knows how to get its CSS style value through the style attribute of an element, but can it get the attribute value of a pseudo-element? Yes, you can also access pseudo-elements in the page using JavaScript.
The code copy is as follows:
<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>
Have you seen it? I can access the content attribute value in the pseudo-element. If you want to create a dynamic, chic website, this is a very useful technique!
classList API
Many JavaScript tools library have addClass, removeClass and toggleClass. In order to be compatible with old browsers, these class libraries use methods to search for the element's className, append and delete this class, and then update the className. In fact, there is a new API that provides methods to add, delete and invert CSS class attributes, called classList:
The code copy 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 implement classList API very early, and finally IE10 also implemented it.
Directly add and delete style rules to style sheets
We are all very familiar with using element.style.propertyName to modify styles. Using JavaScript can help us do this, but do you know how to add or fix an existing CSS style rule? Actually very simple.
The code copy is as follows:
<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 do this if you want to modify an existing rule.
Loading CSS files
Lazy loading of pictures, JSON, scripts, etc. is a good way to speed up page display. We can use curl.js and other JavaScript loaders to delay loading these external resources. But do you know that CSS style sheets can also be delayed loading, and the callback function will be notified after the load is successful.
The code copy is 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 here because it is not necessary;
// We just need it to be loaded on the page
}
});</span>
When all resources are loaded, the callback function will be triggered, and I can load it in the callback function. Very useful!
CSS mouse pointer event
The pointer-events attribute of CSS mouse pointer event is very interesting. Its efficacy is very similar to JavaScript. When you set this attribute to none, it can effectively prevent the element from being disabled. You may say "So what?" In fact, it is prohibited from any JavaScript events or callback functions on this element!
The code copy is as follows:
<span style="font-size:18px;">.disabled { pointer-events: none; }</span>
Click on this element and you will find that no event will be triggered by any listener you placed on this element. A magical feature, really - you don't need to check whether a certain css class exists in order to prevent an event from being triggered.
This is the 5 methods to interact with CSS and JavaScript that you may not have discovered yet. Do you have any new discoveries? Share it!