Home Javascript Javascriptexamples JavaScript getElementById Style
Questions:Ask|Latest

 
 

Share on Google+Share on Google+

JavaScript getElementById Style

Advertisement
This page discusses - JavaScript getElementById Style

JavaScript getElementById Style

       

In this part of JavaScript examples, we have created a simple example which shows the use of style attribute over any element by using the method getElementById().

In the following example, we have created three buttons which calls three different functions addStyleColor() , addStyleHeight() and addStyleWidth() and changes the style property of the specified div with the element's style attribute.

function addStyleColor() {     document.getElementById('myDiv').style.backgroundColor="#ccffdd";    }

Above line of code defines a function into which specified div's background color is being changed with the help of style attribute.

 function addStyleHeight() {   document.getElementById('myDiv').style.height="150px";   
 }

Above line of code defines a function into which specified div's height is being changed with the help of style attribute.

 function addStyleWidth() {   document.getElementById('myDiv').style.width="250px"; 
 }

Above line of code defines a function into which specified div's width  is being changed with the help of style attribute. Here is the full HTML code as follows :


<html>

  <head>
  <title>
  Style getElementById Example
  </title>
  
  <script language="javascript" >
  function addStyleColor() {
  document.getElementById('myDiv').style.backgroundColor="#ccffdd";
  }
  function addStyleHeight() {
  document.getElementById('myDiv').style.height="150px";
  }
  function addStyleWidth() {
  document.getElementById('myDiv').style.width="250px";
  }
  </script>
  </head>
  <body>
  <div style="background: #DFDFFF; width:'100%';" align="center">
  <font color="#000080" size="12pt">
  <b>getElementById Style</b>
  </font>
  </div>
  <center>
  <div id="myDiv" style="background:#ffffdd; height:100px;">
  Welcome to Roseindia
  </div>
  <p>&nbsp;</p>
  <input type="button" value="Style Color" 
   onClick=
"addStyleColor();" />
  <input type="button" value="Style Width" 
  
onClick="addStyleWidth();" />
  <input type="button" value="Style Height" 
  
onClick="addStyleHeight();" />
  </center>
  </body>
</html>

Output :

Click on the button "Style Color". It will call the method addStyleColor() and will change the background color of  "myDiv".

Click on the button "Style Height". It will call the method addStyleHeight() and will change the height of  "myDiv".

Click on the button "Style Width". It will call the method addStyleWidth() and will change the width of element "myDiv".

Download Source Code

       

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Ask Questions?    Discuss: JavaScript getElementById Style  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com