JavaScript and CSS Interactive method rollup _javascript tips

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:

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 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:

MyDiv.classList.add (' Mycssclass '); Adds a class
MyDiv.classList.remove (' Mycssclass '); Removes a class
MyDiv.classList.toggle (' Mycssclass '); Toggles a class

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:

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 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:

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
}
});

The PRISMJS syntax highlighting script used on this site is deferred loading. 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:

. Disabled {Pointer-events:none}

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 personal summary of the 5 JavaScript and CSS to interact with the method, if you have better, please tell, this article will continue to update