5 ways to interact with JavaScript and CSS that you don't necessarily know (forward)

5 ways to interact with JavaScript and CSS that you don't necessarily know

• 10/08. 2014

As the browser continues to upgrade, the boundaries between CSS and JavaScript become blurred. Originally they were responsible for completely different functions, but in the end they all belonged to the Web front-end technology, which needed to work closely with each other. There are. js files and. css files in our web pages, but this does not mean that CSS and JS are independent and cannot be interacted with. Here are the five kinds of JavaScript and CSS to work together in a way you may not know!

Get pseudo-Element (pseudo-element) attributes with JavaScript

Everyone knows how to style get its CSS style values through the attributes of an element, but can get the property values of the pseudo-element (pseudo-element)? Yes, you can also access pseudo-elements in the page using JavaScript.

123456789

//Get the color value of. Element:beforevar color = window. getComputedStyle( document. Queryselector('. Element '), ': Before ' ). GetPropertyValue(' color '); //Get the content value of. Element:beforevar content = window. getComputedStyle( document. Queryselector('. Element '), ': Before ' ). GetPropertyValue(' content ');

See, I can access property values in pseudo-elements content . If you want to create a dynamic, style chic website, this is a very useful technology!

Classlist API

There are many JavaScript tools in the library addClass , removeClass and toggleClass so on. In order to be compatible with older browsers, the methods used by these libraries are to search for elements first className , append and delete the class, and then update className . In fact, there is a new API that provides a way to add, remove, and Invert CSS class properties, called Classlist:

12345

mydiv. Classlist. Add(' Mycssclass '); //Adds a class mydiv. Classlist. Remove(' Mycssclass '); //Removes a class mydiv. Classlist. Toggle(' Mycssclass '); //Toggles a class

The API was implemented very early in most browsers classList , and it was eventually implemented in IE10.

Add and remove style rules directly to a style sheet

We are all very familiar with using element.style.propertyName to modify styles and using JavaScript to help us do this, but do you know how to add or fix an existing CSS style rule? It's actually very simple.

1234567891011

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 often used to create a new style rule, but you can do so if you want to modify an existing rule.

Loading CSS Files

Lazy loading of pictures, JSON, scripts, etc. is a great way to speed up page display. We can defer loading these external resources using such JavaScript loaders as curl.js, but you know that CSS stylesheets can be deferred, and the callback function notifies you when the load is successful.

1234567891011

Curl(     [ "Namespace/mywidget", "Css!namespace/resources/mywidget.css"     ], function(mywidget) { //You can operate on the Mywidget //There is no reference to this CSS file because it is not required; //We just need it to be loaded on the page.     }});

The PRISMJS syntax highlighting script used on this website 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

CSS mouse pointer event pointer-events properties are very interesting, it works very much like JavaScript, when you set this property to none , it can effectively prevent the prohibition of this element, you may say, "So what?" "But in fact, it is forbidden to have any JavaScript events or callback functions on this element!"

1	. disabled { pointer-events: none; }

By clicking on this element, you will find that any listener you place on this element will not trigger any events. A magical feature, really--you don't need to check if a CSS class exists to prevent an event from being triggered.

This is the 5 way to interact with CSS and JavaScript that you may not have found. Do you have any new discoveries? Share it!

5 ways to interact with JavaScript and CSS that you don't necessarily know (forward)