PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

Eight Weeks of Prototype: Week 2, How Prototype Extends Elements

Managing an Element's Styles in Real-Time

As an alternative to changing an element's classes in real-time, you can also change an element's CSS styles. This is done using the setStyle() method. Similarly, you can retrieve an element's styles using getStyle().

Setting Styles with setStyle()

The setStyle() method is used to change the styles of an element. This method takes a single argument, which is an object of property-pair values. Listing 14 shows an example of how to define this object and apply the specified styles. In this example, the #foo div begins quite plain, then is changed to have a red background, bold text and some padding.

Listing 14 Setting an element's styles with setStyle() (listing-14.html)
<html>
    <head>
        <title>Setting an element's styles with setStyle()</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="foo">
            Change this content
        </div>
        <script type="text/javascript">
            var elt = $('foo');
 
            var styles = {
                size       : '18px',
                fontWeight : 'bold',
                background : '#f00',
                padding    : '10px'
            }
 
            elt.setStyle(styles);
        </script>
    </body>
</html>
Note: Some CSS properties (such as float) are reserved words, and must therefore be quoted in the style hash. For example, you would use styles = { 'float' : 'left'; }.

Reading Styles with getStyle()

It is possible to read any element's style using getStyle(). This method takes the style property name as its only argument. You must be careful with the return value, since different browsers may behave slightly different with the value that is returned.

Prototype will handle the differences between internal style names and the corresponding CSS name. For example, you can use getStyle('fontSize') or getStyle('font-size').

Note: The same does not apply with setStyle() You must use the internal name (such as fontSize, fontFamily or backgroundColor) to set the respective style.

Listing 15 shows an example of reading the font family that is being used on an element.

Listing 15 Reading an element's font family with getStyle() (listing-15.html)
<html>
    <head>
        <title>Reading an element's font family with getStyle()</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="foo">
            Change this content
        </div>
        <script type="text/javascript">
            var elt = $('foo');
 
            alert(elt.getStyle('font-family'));
 
            // returns a value such as serif or Times New Roman
 
            elt.setStyle({ 'fontFamily' : 'sans-serif' });
 
            alert(elt.getStyle('font-family'));
 
            // returns sans-serif
        </script>
    </body>
</html>

Retrieving an Element's Dimensions

Prototype provides methods for reading the dimensions of both the viewable browser window, as well as that of a visible element. This is done using the getDimensions(), getWidth() and getHeight() methods.

To read the dimensions of the viewable browser area, getDimensions() is called on the document.viewport object (that is, by calling document.viewport.getDimensions()). To read the dimensions of an element, you simply call getDimensions() on that element.

The getDimensions() method returns an object with two properties: width and height. These are both integers, corresponding to the number of pixels wide and high of the respective element.

Note: For this method to work correctly, you must specify the correct document type. As you can see in the listing below, I have specified a document type of XHTML 1.0 Strict.

In addition to getDimensions(), you can also call getWidth() and getHeight(), however, since each these methods in turn call getDimensions(), it is more efficient to call getDimensions() directly and read the width and height as needed.

Listing 16 shows an example of using the browser and an element's dimensions to centre that element both horizontally and vertically on a page.

Listing 16 Determining an element's size with getDimensions() (listing-16.html)
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Determining an element's size with getDimensions()</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
        <style type="text/css">
            html, body { padding : 0; margin : 0; }
            #foo {
                width      : 300px;
                border     : 1px solid #000;
                padding    : 10px;
                background : #eee;
                text-align : center;
            }
        </style>
    </head>
    <body>
        <div id="foo">
            This box will become centered
        </div>
        <script type="text/javascript">
            var elt         = $('foo');
 
            // retrieve required dimensions
            var eltDims     = elt.getDimensions();
            var browserDims = document.viewport.getDimensions();
 
            // calculate the center of the page using the browser and element dimensions
            var top  = (browserDims.height - eltDims.height) / 2;
            var left = (browserDims.width - eltDims.width) / 2;
 
            // set the style of the element so it is centered
            var styles = {
                position : 'absolute',
                top      : top + 'px',
                left     : left + 'px'
            };
 
            elt.setStyle(styles);
        </script>
    </body>
</html>
Note: When setting the top and left of the element, you must remember to specify the unit type. That is, px.

In This Article