HTML DOM Manipulation using JavaScript

Manipulate HTML input objects using JavaScript[/caption]

JavaScript is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for Web pages, but it's used in many non-browser environments as well.

Today we will discuss about creating theme using javascript.

JavaScript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event.

Javascript can access and manipulate HTML input objects, and this is basics to create a theme using javascript.

Change Body Background Color

 <html>  
 <head>  
 function changeBodyColor($color) {  
 document.body.style.backgroundColor = $color;  
 }  
 </head>  
 <body>  
 <button onclick="changeBodyColor('red')" >Red</button>  
 <button onclick="changeBodyColor('green')" >Green</button>  
 <button onclick="changeBodyColor('blue')" >Blue</button>  
 <input type="text" onkeyup="changeBodyColor(this.value)">  
 </body>  
 </html>  

Demo Here




One of many JavaScript HTML methods is getElementById().

This example uses the method to "find" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript":

 document.getElementById("demo").innerHTML = "Hello JavaScript";   

JavaScript can change style of any HTML element, it can also change the attribute of HTML elements

 document.getElementById("demo").style.fontSize = "25px";  
 or  
 document.getElementById('demo').style.fontSize = '25px';