DOM Style properties
You saw in previous section how the HTML page is represented by the browser as a DOM tree. The DOM nodes—individual “leaves and branches” making up the DOM tree—are objects, each having its own properties and methods.
You’ve seen various methods that allow you to select individual DOM nodes, or collections of nodes, such as document.getElementById().
Each DOM node has a property called style, which is itself an object containing information about the CSS styles pertaining to its parent node. Let’s see an example:
<div id="id1" style="width:200px;">Welcome back to my site.</div>
<script>
var myNode = document.getElementById("id1");
alert(myNode.style.width);
</script>
In this case the alert would display the message “200px.”
Try it Yourself: Setting Style Properties
Let’s write a function to toggle the background color and font color of a page element between two values, using the DOM style object
function toggle() {
var myElement = document.getElementById("id1");
if(myElement.style.backgroundColor == 'red') {
myElement.style.backgroundColor = 'yellow';
myElement.style.color = 'black';
} else {
myElement.style.backgroundColor = 'red';
myElement.style.color = 'white';
}
}
The function toggle() first finds out the current background-color CSS property of a page element, and then compares that color to red.
If the background-color property currently has the value of red, it sets the style properties of the element to show the text in black on a yellow background; otherwise, it sets the style values to show white text on a red background.
We use this function to toggle the colors of a <span> element in an HTML document.
The Complete code below
<!DOCTYPE html>
<html>
<head>
<title>Setting the style of page elements</title>
<style>
span {
font-size: 16pt;
font-family: arial, helvetica, sans-serif;
padding: 20px;
}
</style>
<script>
function toggle() {
var myElement = document.getElementById("id1");
if(myElement.style.backgroundColor == 'red') {
myElement.style.backgroundColor = 'yellow';
myElement.style.color = 'black';
} else {
myElement.style.backgroundColor = 'red';
myElement.style.color = 'white';
}
}
window.onload = function() {
document.getElementById("btn1").onclick = toggle;
}
</script>
</head>
<body>
<span id="id1">Welcome back to my site.</span>
<input type="button" id="btn1" value="Toggle" />
</body>
</html>
Create the HTML file in your editor and try it out. You should see that when the page originally loads, the text is in the default black and has no background color. That happens because these style properties are initially not set in the <style> instructions in the page head, as an inline style, or via the DOM.
Executing when the button is clicked, the toggle() function checks the current background color of the <span> element. On finding that its value is not currently red, toggle() sets the background color to red and the text color to white.
The next time the button is clicked, the test condition
if(myElement.style.backgroundColor == 'red')
returns a value of true, causing the colors to be set instead to black on a yellow background.
