Web coding support
  • Home
  • PHP
  • Phonegap
  • Angular Js
  • Node Js
  • Previous year questions
  • B.Tech Questions
  • RTU

HTML DOM Manipulation using JavaScript

  • By admin
  • May-26-2017
  • PHP
  • 0 Comments.
Manipulate HTML input objects 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'; 

Related Posts

  • How works ng-hide and ng-show in angular jsHow works ng-hide and ng-show in angular js
  • Hide show HTML element by javascriptHide show HTML element by javascript
  • Magic function library for Codeigniter like CakePHPMagic function library for Codeigniter like CakePHP
  • What is the difference between an interface and abstract classWhat is the difference between an interface and abstract class
  • Create app in phonegap in windowsCreate app in phonegap in windows
  • How to reset an array keys in phpHow to reset an array keys in php

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Google+ (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on WhatsApp (Opens in new window)
  • Click to email this to a friend (Opens in new window)
  • Click to print (Opens in new window)

Related

FacebookTwitterGoogle+Google GmailPrintPinterestFacebook MessengerWordPressShare

Comments

Leave a Reply Cancel reply

← Previous Post Next Post →

Categories

  • Angular Js
  • Array
  • Codeigniter
  • facebook
  • Javascript
  • jquery
  • MySQL
  • oops
  • Pagination
  • Phonegap
  • PHP

Recent Posts

  • Fetch random results form MySQL
  • HTML DOM Manipulation using JavaScript
  • Magic function library for Codeigniter like CakePHP
  • What is the difference between an interface and abstract class
  • How to reset an array keys in php

Tags

Abstract Class angularjs array codeigniter facebook facebook login facebook sdk form validations function hide html Interface javascript jquery magic functions method mysql ng-hide ng-show nghide ngshow oops pagiation php recursion reference show static static functions

Subscribe us

Name
Email *
About This Site

We provide the simplest tutorials for web development.

Pages
  • Home
  • B.Tech Questions
  • Previous year questions
  • RTU
Categories
  • Angular Js
  • Array
  • Codeigniter
  • facebook
  • Javascript
  • jquery
  • MySQL
  • oops
  • Pagination
  • Phonegap
  • PHP
Search
  • facebook
  • twitter

Powered by Minmarks.com  |  A Coding blog by By Jitendra.

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.