Introduction:
The main theme of this article is to style the elements in javascript. We have different methods to style elements in javascript. You can also apply style on HTML elements to change the visual presentation of HTML documents dynamically using JavaScript. You can set almost all the styles for the elements like fonts, colors, margins, borders, background images, text alignment, width and height, position, and so on.
In the following section, we'll discuss the various methods of setting styles in JavaScript.
Also Read, Javascript hasOwnProperty
Getting Style information from Elements:
CSS alone is not enough sometimes. You might need to control your CSS values with JavaScript. But how do you get CSS values in JavaScript?
Turns out, there are possible ways, that is inline styles.
Getting Inline Styles:
Inline Styles are styles that are present in HTML in the Style attribute.
| <div class="element" style="font-size: 2em; color: red;">Red hot chili pepper!</div> |
To get inline styles you can use the Style property.
|
const element = document.querySelector('.element')
const fontSize = element.style.fontSize console.log(fontSize) // 2em.
const color = element.style.color console.log(color) // red. |
Let’s see an example to understand better.
The following example will get the style information from the element having id="intro".
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS Get Element's Style Demo</title> </head> <body> <p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p> <p>This is another paragraph.</p>
<script> // Selecting element. var elem = document.getElementById("intro");
// Getting style information from element. alert(elem.style.color); // Outputs: red. alert(elem.style.fontSize); // Outputs: 20px. alert(elem.style.fontStyle); // Outputs nothing. </script> </body> </html> |
The style property isn't very useful when it comes to getting style information from the elements, because it only returns the style rules set in the element's style attribute, not those that come from elsewhere, such as style rules in the embedded style sheets, or external style sheets.
To get the values of all CSS properties that are actually used to render an element you can use the window.getComputedStyle() method
Let’s understand better with an example,
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Get Computed Style Demo</title> <style type="text/css"> #intro { font-weight: bold; font-style: italic; } </style> </head> <body> <p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p> <p>This is another paragraph.</p>
<script> // Selecting element. var elem = document.getElementById("intro");
// Getting computed style information. var styles = window.getComputedStyle(elem);
alert(styles.getPropertyValue("color")); // Outputs: rgb(255, 0, 0). alert(styles.getPropertyValue("font-size")); // Outputs: 20px. alert(styles.getPropertyValue("font-weight")); // Outputs: 700. alert(styles.getPropertyValue("font-style")); // Outputs: italic. </script> </body> </html> |
Adding CSS Classes to Elements:
You can also get or set CSS classes to the HTML elements using the className property.
Since the class is a reserved word in JavaScript, so JavaScript uses the className property to refer to the value of the HTML class attribute. The following example will show how to add a new class, or replace all existing classes with an <div> element having id=" info".
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS Add or Replace CSS Classes Demo</title> <style> .highlight { background: yellow; } </style> </head> <body> <div id="info" class="disabled">Something very important!</div>
<script> // Selecting element. var elem = document.getElementById("info");
elem.className = "note"; // Add or replace all classes with note class. elem.className += " highlight"; // Add a new class highlight. </script> </body> </html> |
You can use the classList property to get, set, or remove CSS classes easily from an element. This property is supported in all major browsers except Internet Explorer prior to version 10. Here's an example:
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS classList Demo</title> <style> .highlight { background: yellow; } </style> </head> <body> <div id="info" class="disabled">Something very important!</div>
<script> // Selecting element. var elem = document.getElementById("info");
elem.classList.add("hide"); // Add a new class. elem.classList.add("note", "highlight"); // Add multiple classes. elem.classList.remove("hide"); // Remove a class. elem.classList.remove("disabled", "note"); // Remove multiple classes. elem.classList.toggle("visible"); // If class exists remove it, if not add it.
// Determine if class exist. if(elem.classList.contains("highlight")) { alert("The specified class exists on the element."); } </script> </body> </html> |
For good practice try it on an online javascript editor.
FAQs
-
Is javascript used for styling?
Javascript not only lets us style the element we are interacting with, more importantly, but it also allows us to style elements all over the page.
-
Can you style javascript alert?
The standard alert box in JavaScript does not provide the option to apply CSS. To style your alert box, you need to create a custom one first.
The custom alert box will be created using jQuery and styles will be applied to CSS.
-
Can you use CSS in javascript?
The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS files in the HTML document. JavaScript can also be used to load a CSS file in the HTML document.
-
What is DOM in javascript?
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.
Key Takeaways:
In this blog, we learned about how to DOM style elements in Javascript. We explored getting inline styles, style information from elements. After that, we learned about how to add CSS classes to elements. The main idea of the blog is to style your elements in javascript.
To know more about exploring the tutorials of javascript at CodingNinjas.
117+ registered 