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.
Tutorials
- Clear cookie example
- JavaScript getElementById innerHTML
- JavaScript getElementById Style
- Javascript Examples
- JavaScript add row dynamically to table
- New Page 1
- JavaScript Change link
- JavaScript Checkbox getElementById
- javascript clear textarea
- JavaScript Clock Timer
- JavaScript Cookies
- JavaScript Date Difference
- JavaScript duplicate string
- JavaScript Email Validation
- javascript focus input
- JavaScript get excel file data
- JavaScript getAttribute Href
- JavaScript getAttribute Style
- JavaScript getElementById div
- JavaScript getElementById Iframe
- JavaScript getElementById select
- JavaScript Hide Button
- JavaScript Hide Div
- JavaScript hide image
- JavaScript Hide Table Column
- JavaScript Hide Table Rows
- JavaScript Key Event
- JavaScript link
- JavaScript method location
- JavaScript move div
- JavaScript move file
- JavaScript move image
- JavaScript Navigate Back
- JavaScript navigate to page
- JavaScript Navigate to URL
- JavaScript indexOf substring
- JavaScript onkeypress event
- JavaScript Open file
- JavaScript Open link in new window
- JavaScript Open Modal Window