Manipulating CSS in JavaScript

It is also possible to deal with the CSS applied to HTML elements with the help of JavaScript.
Using JavaScript it is possible

1. Change the CSS Class attached to an HTML Element
2. Apply a new CSS Class to an HTML Element
3. It is also possible to remove the a Class name attached to an HTML Element
4. Similary a Single CSS Style can be applied or can be chanaged or removed from an HTML Element.

Here is a general syntax for applying or changing the class name to an HTML Element.

document.getElementById('elementID').className="new Class Name";

Similary the general syntax for applying a single CSS style property to an HTML Element is

 document.getElementById('elementID').style.property="new css property";

Here are the demonstrations for this manipulation

Suppose we have paragraph text and we wan to highlight this paragraph by changing the background color of this paragraph when a user hover over this paragrahp.

Code for this example is given below

<style>
.mystyle {
  width: 300px;
  height: 100px;
  background-color: coral;
  text-align: center;
  font-size: 25px;
  color: white;
  margin-bottom: 10px;
}
</style>

<p id="myp" onmouseover="myFunction()">
I am a paragraph showing the effect of mouseover <br>
event and a class name change in it
  
</p>

<script>
function myFunction() {
  document.getElementById("myp").className = "mystyle";
}
</script>

Similary following example demonstrate how we can change or add the single CSS property of an HTML Element.

<h1 id='redheading'> Color of this text changes to red when you click on below button</h1>


document.getElementById('redheading').style.color="red";


These are the easy to understandable examples of JavaScript.