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:
// 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');
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:
myDiv.classList.add('myCssClass'); // Adds a class
myDiv.classList.remove('myCssClass'); // Removes a class
myDiv.classList.toggle('myCssClass'); // Toggles a class
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:
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 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:
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
}
});
The PrismJS syntax highlighting script used by this website is lazy loading. 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?", but in fact, it prohibits any JavaScript events or callback functions on this element!
The code copy is as follows:
.disabled { pointer-events: none; }
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.
The above are 5 ways to interact with JavaScript and CSS by me. If you have any better ones, please tell me. This article will be updated continuously.