January 13, 2016

How to Add Style Using JavaScript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to add style using javascript. As you already know whenever we want to enhance the appearance of an element, we make use of CSS to add some styles to it.

CSS fits the need if you do not want to modify the styles of an element, once the page is completed loaded. If you want to modify them later, then indeed javascript is the way to go.

Each DOM element has certain properties and style property is one of them. This property is used to get and set the styles of an element. With the help of this property, you can change background color, the color of text, modify borders, etc.

We can take advantage of the style property to add new styles or modify existing styles of any element.

In the following example, we have a button element and a div element. Upon click of a button, we will add some new styles and make some changes to the existing styles of the div element. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file (div and button). The div element with a class of container is just a wrapper for the rest of the elements.
The innerText for the button element is “Add Style”.
By default, the div element with an id of myDiv has a background color of red. We will change its border color, background color, and border radius using javascript.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>

  <div class="container">
   <button>Add Style</button>
   <div id="myDiv"></div>
  </div>

  <script src="script.js"></script>
</body>

</html>

.container {
    width: 400px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

button  {
  padding: 5px 10px;
}

#myDiv {
  height: 400px;
  width: 400px;
  background-color: red;
  margin-top: 10px;
}

Javascript

We have selected the div element and the button element using the document.querySelector() method and stored them in myDiv and btn variables respectively.
We have attached the click event listener to the button element.
In the event handler function, we are changing the background color of the div element from red to green by using the backgroundColor property.

We are changing the background color of the div element from red to green by using the backgroundColor property.
We are changing the thickness and color of the border using border property.
We are changing its shape from rectangular to circle by setting borderRadius property to 50%.

let myDiv = document.querySelector("#myDiv");
let btn = document.querySelector("button");

btn.addEventListener("click", () => {
  myDiv.style.backgroundColor = "green";
  myDiv.style.border = "10px solid black";
  myDiv.style.borderRadius = "50%";
});

You May Also Like: