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';
