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.
