JavaScript style Property | how to change css in javascript

Style Property
getComputedStyle

JavaScript style property is used to add, get and change css in javascript. style is the property of HTMLElement Node in DOM. This can change css on events like, click, mouseover, mouseout etc.

Style property can also change theme on click of button or any other event. Like user can choose different color theme as per his preference, like dark mode, light mode or default system mode.

style change css in DOM inline css. As inline css have more specificity, so in most of the cases, Style Property change style of element.

JavaScript Style

Javascript style property is used to set css to html elements. This is applicable to DOM Elements only. After document element, style property is used. All the css properties are used in camel casing, for exp fontSize. See example

change color using css


document.body.style.color="red";                
document.body.style.fontSize="14px";

add multiple css properties


document.body.style="background:#222; color:#fff";

After running this code in Javascript, JS will replace current stylesheet with new properties in DOM. We can check new properties in Browser's Inspect.

Change css on click

In the next example, we will change font color on mouse click. See example below

This is dummy text


<button class="green">Green</button> 
<button class="yellow">Yellow</button> 
<button class="red">Red</button> 
<span class="exp">This is dummy text</span> 
           

<script>            
document.querySelector(".green").addEventListener("click",function(){
    document.querySelector(".exp").style.color="green";
});

document.querySelector(".yellow").addEventListener("click",function(){
    document.querySelector(".exp").style.color="yellow";  
});
                        
document.querySelector(".red").addEventListener("click",function(){
    document.querySelector(".exp").style.color="red";
});
</script>

If !important is used in CSS code, than style property cannot overwrite current css.

getComputedStyle

JavaScript getComputedStyle method is used to get style of html elements in JavaScript String. getComputedStyle is a window method with parameter HTMLElement Node. See how to get css in javascript.

CSSStyleDeclaration{...}


const css=getComputedStyle(document.body); 
                                
console.log(css);

check property of getComputedStyle

14px

block

none


const fs=getComputedStyle(document.body).fontSize; 

const bd=getComputedStyle(document.body).display;    
    
const hd=getComputedStyle(document.head).display;

console.log(fs);
console.log(bd);
console.log(hd);

If an HTML Element is having both class and id, and both class and id are used in css code, getComputedStyle will return value of id as id is more specific than class.
See CSS Selectors Specificity for the reason.

Show and hide text on button click

This is example text


<button class="toggle">Hide Text</button> 
<span class="exp">This is example text</span> 

<script>            
document.querySelector(".toggle").addEventListener("click",function(){
    const x=document.querySelector(".exp");
    const y=getComputedStyle(x).display;
    
    if(y=="none"){
        x.style.display="inline";
    }
    else{
        x.style.display="none";
    }   
});
</script>