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

JavaScript getElementById Style

JavaScript getElementById Style

JavaScript getElementById Style

Tutorials