There can be various reasons why we need to change CSS and manipulate with HTML elements, it could be to load the stylesheet dynamically, to change a button’s color when a user clicks it, or to write CSS in JavaScript. All of these changes can be done through JavaScript. In this article we’ll see various ways of accessing CSS with JavaScript and changing it.
Using JavaScript to Change CSS
There are various methods in JavaScript which help in accessing HTML elements and through that we can manipulate the values of CSS. Some of these methods are explained below along with examples.
Using getElementsByClassName()
The method getElementByClassName() takes in a string as a class name and searches the entire HTML document and returns the elements with the same class name. Once the class name is identified we can change the CSS properties as shown below in the example:
HTML:
JavaScript:
function changeBorder() {
document.getElementsByClassName("border_class")[0].style.borderColor = "Green";
document.getElementsByClassName("ml-3")[0].style.backgroundColor = "Yellow";
}
</script>
Here we searched the HTML element by classname and changed the CSS properties of those elements using style.backgroundColor and style.borderColor.
Output:
Using getElementById()
Another method to use is getElementById() which searches all the HTML elements with similar ids and performs the assigned function on them. Mostly various divs are used which are assigned with ids and these ids are searched using this method. This is the most used methods by developers, below is an example:
HTML:
JavaScript:
function styleChange() {
document.getElementById("border").style.backgroundColor = "Yellow";
document.getElementById("border").style.borderColor = "Red";
document.getElementById("btn").style.backgroundColor = "Green";
document.getElementById("btn").style.color = "White";
document.getElementById("btn").style.borderColor = "Yellow";
}
</script>
Here we’ve used the method to search all the elements using their id and changed the CSS properties using style.
Output:
Using querySelector()
Another method that works just like the above two methods is the querySelector() method which can search by class name, id name and even by HTML tags but it only returns the first HTML element mentioned to search. Below is the ways to use the querySelector:
document.querySelector(". css class name ");
document.querySelector("HTML tag like: div>");
Below is an example of querySelector() and how it can be used with class name, ids etc:
HTML:
JavaScript:
function styleChange() {
document.querySelector("#border").style.backgroundColor = "Yellow"
document.querySelector(".ml-3").style.backgroundColor = "Green"
}
</script>
Here we used the querySelector() method to search for classes and id of divs, and changed their CSS properties.
Output:
Conclusion
There are various reasons to change CSS, and the best way to do that is using JavaScript as it can easily access the elements of HTML and change their CSS properties. In this article we discussed how to change CSS using JavaScript, various methods provided in JavaScript to change the values of HTML elements. These make the job of developers easy and make the web page more dynamic. Through these methods we can change button colors on click, background colors, font colors etc easily and further manipulate with CSS properties.
