HTML DOM Manipulation using JavaScript

Manipulate HTML input objects using JavaScript
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';