5 Different Ways That CSS & JavaScript Interact with Each other

5 Different Ways That CSS & JavaScript Interact with Each other

A front-end web development technologies are HTML,CSS & JavaScript. We all know that HTML helps us to put text on a webpage, CSS helps us to provide a style to text & JavaScript helps us to provide the functionality to the website.

Though we have separate files for each of them like .html, .css & .js they do interact with each other. You may be thinking that .css .js are different then how they can work with each other means that what we all know they can interact with each HTML file but is there any possibility that CSS & JS can work together?

The answer is YES. As CSS & JavaScript, both are frontend technologies they need to interact with each other.

In this blog, you will find out How CSS & JS interact with each other? Let's see,

1.Pseudo Element Property of CSS within a JS

We all know that we can add CSS properties in JS with HTML tags. But CSS has pseudo-classes as well. Pseudo-classes in CSS are the set of CSS properties that can be used to differentiate the same HTML tags with different styles. It means that if you have 2 tags then you can differentiate them with the different CSS properties. Like you can print a 1 in Red color & other 1 in Green Color. Now, here is the point that Is it possible to use CSS pseudo Class within a JS, Yes we can use it.

Let's see an example

var color = window.getComputedStyle (document.querySelector('.element'), ':before' ).getPropertyValue('color');

The above code will help you to get the color value of .element: before Here the pseudo class is .element: before with a property color.

2.ClassList API

We already have used addClass, removeClass & toggleClass in jQuery a JS library. But to support older browsers, each library needs to grab a class name, append & remove the class & then it will update the class name string. So, to overcome this lengthy process there is a new API which is called classList API, which is used for adding, removing & toggling CSS classes.

Let's see an example for this

div1.classList.add('cssClass1'); div1.classList.remove('cssClass2'); div1.classList.toggle('cssClass3');

In reality, this classList API was implemented a long time ago in most browsers but now it's supported by IE 10 also.

3. Add & remove rules directly to stylesheets

We already have used a JS code element.style.propertyname method to change the style of the selected element to work on this method we have used JavaScript Toolkits. But with the new API, you can actually add & remove the rules within the new & existing stylesheets. This new API is very simple to use.

Let's see it with the example

function addCssRule(sheet, selector, rules, index)

{

if(sheet.insertRule)

{

sheet.insertRule( selector + "{" + rules +"}", index);

}

else

{

sheet.addRule(selector, rules, index);

}

}

To call this function, addCssRule(document.stylesheets[0], "p", "align:center");

The above code you can use on the existing stylesheet, if you want to create a new stylesheet you can do it as well.

4. Load CSS files with loader

We all know that more loading time tends to decrement in the number of users & which also affects the SEO ranking of the website. Images, JSON & Scripts are more responsible for increasing the load time. To work on it means to load these external resources you can use the curl.js.

Do you know that you can also load CSS stylesheets & get notifications within the same callback?

curl

(

 [

      "namespace/style1", "css!namespace/resources/style1.css"

 ],

function(style1)

 {

     //here we have to write a code for style1.

 }

);

5.CSS Pointer events

CSS pointer events act the same in JS as well. If the value of the element is none it effectively disabled the element & if the value is not none it allows the element to use function as per the script. These pointer events even prevent JS from firing JS Events.

For example

disabled

{pointer-events : none};

Click on that element with & use any addEventListener callback on the element, the event will not be fired.

The above are the 5 different ways where CSS & JS interact with each other to increase the functionality of the website & to decrease the load time of the website and increase the efficiency of the website.

You've successfully subscribed to HTML5Awesome
Great! Next, complete checkout to get full access to all premium content.
Welcome back! You've successfully signed in.
Unable to sign you in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Billing info update failed.