How to count JavaScript and CSS Interactions

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 ways to work together with JavaScript and CSS!

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

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

650) this.width=650; "alt=" JS and css interaction "class=" Img-thumbnail "src=" http://image.evget.com/images/article/2014/ Js-css-122-1.png "/>

See, the above can access the content property value in the pseudo-element. If you want to create a dynamic, stylish website, this is a very useful technology!

classlist API

Many JavaScript libraries have Addclass,removeclass and Toggleclass methods. In order to be compatible with older browsers, these class libraries use methods to search for classname of elements, append and delete this 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:

650) this.width=650; "alt=" JS and css interaction "class=" Img-thumbnail "src=" http://image.evget.com/images/article/2014/ Js-css-122-2.png "/>

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.

650) this.width=650; "alt=" JS and css interaction "class=" Img-thumbnail "src=" http://image.evget.com/images/article/2014/ Js-css-122-3.png "/>

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.

650) this.width=650; "alt=" JS and css interaction "class=" Img-thumbnail "src=" http://image.evget.com/images/article/2014/ Js-css-122-4.png "/>

CSS mouse pointer events

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 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!"

650) this.width=650; "alt=" JS and css interaction "class=" Img-thumbnail "src=" http://image.evget.com/images/article/2014/ Js-css-122-5.png "/>

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.

As the Web front-end development artifact--webstorm Intelligent performance and visual operation, greatly provides the efficiency of front-end development. Hewlett-Packard has now launched the " Genuine IDE co-promotion program" and "online purchase Promotion",webstorm can be bought 70 percent , there are also 50 percent time-limited buy-in.

How to count JavaScript and CSS Interactions