Coding a dynamic script

Since JavaScript gives you access to all of the elements of a document, you can access and modify their style attribute (typically set by CSS) using the style DOM node property.
The scripts you create can be alter as a result of user interactions or events.

Let’s say we want to change the background color of the div_1 and the border of the div_2 when user’s mouse moves over the div with the id div_1.

<body>
<div id="div_1">
Cotent of the first div.
</div>
<div id="div_2">
Cotent of the second div.
</div>
<script>
var d1 = document.getElementById("div_1");
var d2 = document.getElementById("div_2");
d1.onmouseover = function () {
	d1.style.backgroundColor = "#00FF00";
	d2.style.borderWidth = "5px";
}
d1.onmouseout = function () {
	d1.style.backgroundColor = "#FFFFFF";
	d2.style.borderWidth = "1px";
}
</script>
</body>

Of course this is just an example but you can modify the entirety of the HTML code within a given element using the DOM node innerHTML property.

Leave a Reply