JavaScript Add Style To Element
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of JavaScript add style to element, basically, style an element using a cascading style sheet or CSS in an HTML file.
Now we can add style elements also using JavaScript. We are going to use different methods to add style to an element.
Step By Step Guide On JavaScript Add Style To Element :-
At first, let’s look at the HTML code first:
<!DOCTYPE html> <html lang = " en " > <head> <meta charset = " UTF-8 "> <meta http-equiv = " X-UA-Compatible " content = " IE=edge "> <meta name = "viewport " content = " width=device-width , initial-scale = 1.0 "> <title> JavaScript add style to an element </title> </head> <body> <h2 style = "color :indigo ;" > JavaScript add style to an element </h2> <div id = " div1 " > this is a DIV </div> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the < html > tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both < head > and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Create < script > tag to add JS.
- Thirdly, the < body > tag is used to define the webpage body. All the contents to show on the website are written here.
- < h2 > tag used to add heading here. We used inline CSS here to set the color to the heading.
- Then add < div > tag also with the id “div1”.
Method 1
Here we will use document.querySelector.
const h2 = document.querySelector( ' h2 ' ) h2.style.color = ' green ' ; h2.style.backgroundColor = ' almond ' ;
- Here using document.querySelector to select h2
- Add style by h2.style.StyleProperty
(note: if the JS code written in the console window , by typing it you will see various type of style property there)
Method 2
Here we will also use document.querySelector and add colour to an Id.
var element;
document.querySelector("#div1").style.backgroundColor ="yellow";
document.querySelector("#div1").style.color ="blue";
console.log(element);
- Here using document.querySelector to select the id div.
- Add style property to it (ex: background-colour, colour) by.
Method 3
Here we will use .setAttribute property.
let el = document.querySelector("body")
e1.setAttribute("class","yellow")
- Here using document.querySelector to select the <body>
- Here .setAttribute property is use to set a value to the specified element
- Then add the style property.
Method 4
This is another method to add style using JavaScript.
var prop=document.createElement("div");
prop.innerHTML="<style>h1{background:red;}</style>";
document.body.appendChild(prop);
- Create a variable named prop.
- Use prop.innerHTML to add desired property.
- Using .appendChild to add the style to only one node.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to add style using JavaScript.
I hope this article on JavaScript add style to element helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
