As browsers continue to upgrade, the boundaries between CSS and JavaScript become blurred. Originally they were responsible for completely different functions, but in the end, they all belong to the Web front-end technology, they need to work closely with each other. Our web pages have both. js files and. css files, but this does not mean that CSS and JS are independent and cannot interact. Here are five JavaScript and CSS ways to work together you may not know!
Using JavaScript to get pseudo element (pseudo-element) attributes
Everyone knows how to get its CSS style values from an element's style property, but can you get the attribute value of the pseudo element (pseudo-element)? You can also use JavaScript to access pseudo elements in the page.
Copy Code code 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>
See, I can access the content attribute value in the pseudo element. If you want to create a dynamic, style chic website, this is a very useful technology!
Classlist API
Many JavaScript ToolPak tools have Addclass,removeclass and Toggleclass methods. In order to be compatible with older browsers, the methods used in these libraries are to search the classname of the element first, append and delete the class, and then update the classname. There is actually a new API that provides a way to add, delete, and invert CSS class attributes, called Classlist:
Copy Code code 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>
CLASSLISTAPI is implemented early in most browsers, and it's finally implemented in IE10.
Add and remove style rules directly to a style sheet
We're all very familiar with using Element.style.propertyName to modify styles, and using JavaScript can help us do that, but do you know how to add or fix an existing CSS style rule? It's actually very simple.
Copy Code code 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 so if you want to modify an existing rule.
Load CSS File
Delaying loading of pictures, JSON, scripts, and so on is a good way to speed up the page display. We can delay loading these external resources using such JavaScript loaders as curl.js, but you know that CSS stylesheets can also be deferred, and the callback function will be notified after the load succeeds.
Copy Code code 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 because it is not required;
We just need it to have been loaded onto the page
}
});</span>
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 events
The 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 this element, you may say "what?" "But, in fact, it is prohibited by any JavaScript event or callback function on this element!"
Copy Code code as follows:
<span style= "FONT-SIZE:18PX;" >.disabled {pointer-events:none;} </span>
By clicking on this element, you will find that any listener you put on this element will not trigger any events. A magical feature, really-you don't need to check whether a CSS class exists in order to prevent an event from being triggered.
This is the 5 way you may not have found CSS and JavaScript interaction. Do you have any new discoveries? Share it out!
