- 4 years ago
- Zaid Bin Khalid
- 8193 Views
-
6
In this session, you will learn how to style elements in JavaScript with the help of an example.
Styling DOM Elements in JavaScript
To change the visual presentation of HTML documents dynamically you can also apply style on HTML elements using JavaScript. Like fonts, colors, background pictures or images, text alignment, width and height, position, and so on, you can set almost all the style for the elements.
Various methods of setting styles in JavaScript
There are three basic various methods for setting style in JavaScript, as mention below:
- Setting Inline Styles on Elements.
- Getting Style Information from Elements.
- Adding CSS Classes to Elements.
In the following detail, we will discuss the various methods of setting styles in JavaScript.
By using the style attribute the Inline-styles are applied directly to the specific HTML element. To get or set the inline style of an element the style property is used in JavaScript
The color and font properties will set of an element with the help of id=”intro” command as shown in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Set Inline Styles Demo</title>
</head>
<body>
<p id="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
var elem = document.getElementById("intro");
// Appling styles on element
elem.style.color = "blue";
elem.style.fontSize = "18px";
elem.style.fontWeight = "bold";
</script>
</body>
</html>
Getting Style Information from Elements
By using the style property you will get the styles applied on the HTML elements. The style information will set from the element with the help of id=”intro” command as shown in the following example:
<!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>
Adding CSS Classes to Elements
With the help of className property, you can get CSS classes to the HTML elements.
In JavaScript, they use the className property to identify the value of the HTML class attribute since, as you know class is a reserved word in JavaScript.
How to add a new class, or replace all existing classes to an <div> element having id=”info” are shown in below example:
<!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>
To work with CSS classes there is another best way, with the help of classList property you can get, set, or remove CSS classes easily from the element. This method supported or work with all major browsers except Internet Explorer version 10. As shown in the 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>
- 4 years ago
- Zaid Bin Khalid
- 8193 Views
-
6