Tutorials Point


  Learn Prototype
  Prototype Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

Prototype getStyle() Method


previous next AddThis Social Bookmark Button


Advertisements

This method returns the given CSS property value of element. Property can be specified in either of its CSS or camelized form.

Thus providing font-size and fontSize are equivalent.

Syntax:

element.getStyle( property );

Return Value:

  • Either CSS property value or NULL if it does not find a property set. Internet Explorer returns literal values while other browsers return computed values. Safari returns null for any non-inline property if the element is hidden.

Example:

<html>
<head>
<title>Prototype examples</title>
<script type="text/javascript" 
   src="/javascript/prototype.js">
</script>
<script>

function showResult(){
   var str = $('grandfather').getStyle('margin-left');
   alert("Element left margin is : " + str );
 }
</script>
<style>
  #grandfather {
    font-size: 12px;
    margin-left: 1em;
  }
</style>
</head>

<body>

  <p>Click the button to see the result.</p>

   <div id="grandfather">This is grand father
      <div id="father"> This is father.
         <div id="kid">This is kid</div>
      </div>
   </div>

   <br />
   <input type="button" value="showResult" 
             onclick="showResult();"/>

</body>
</html>

To understand it in better way you can Try it yourself.



previous next Printer Friendly

Advertisements


  

Advertisements