JavaScript getAttribute Style

We have discussed in our previous examples the use of getAttribute() method. Visit the link http://www.roseindia.net/javascript/javascript-getattribute-method.shtml to get the example of getAttribute() method. In this example we will describe you the use of getAttribute() method with the "style" attribute.

Explanation with code :

To illustrate this example we have created an html page in which we have created a div with its auto "width" and fixed height. We have created a button also "Change Width" and it calls a user defined function getAttributeStyle() defined in the JavaScript.

function getAttributeStyle() {
document.getElementById('myDiv').getAttribute("style").width="150px";
}

In this function we have fetched the div element's reference and with this reference we can further call the getAttribute("style") method to have its "style" attribute. Now we can change <div> width by the specified value.

Full html code of the example is as follows :

<html>
 <head>
   <title>
     getAttribute Style Example
   </title>
     <script language="javascript" >
	function getAttributeStyle() {
	 document.getElementById('myDiv').getAttribute
                                ("style").width="150px"; 
	}
     </script>
 </head>
 <body>
   <div style="background: #DFDFFF; width:'100%';" align="center">
    <font color="#000080" size="12pt">
	<b>getAttribute Style</b>
    </font>
   </div>
 <center>
 <div id="myDiv" style="background:#ffffdd; height:100px; 
                                                 float:inherit">
	Welcome to RoseIndia Technologies
	Rose India Technologies Pvt. Ltd.
	is a global services company that
	ensures maximum returns on 
	investments by providing quality 
	software solutions and services 
	to its clients.
 </div>
 </center>
 <center>
   <div>
     <input type="button" value="Change Width" 
           onClick="getAttributeStyle();">
   </div>	 
 </center>
</body>
</html>

Output :

As you will click on the button "Change Width" it will change the width by the "style" attribute.

Download Source Code

JavaScript getAttribute Style

JavaScript getAttribute Style

JavaScript getAttribute Style

Tutorials