Accessing CSS Properties from JavaScript

The textDecoration property I used in an earlier example represents a CSS property that is normally hyphenated, like this: text-decoration. But since JavaScript reserves the hyphen character for use as a mathematical operator, whenever you access a hyphenated CSS property you must omit the hyphen and set the character immediately following it to uppercase.

Another example of this is the font-size property, which is referenced in JavaScript as fontSize when placed after a period operator, like this:

myobject.fontSize = '16pt'

An alternative to this is to be more long-winded and use the setAttribute function, which does support (and in fact requires) standard CSS property names, like this:

myobject.setAttribute('font-size', '16pt')

Warning

Some versions of Microsoft Internet Explorer are picky in certain instances about using the JavaScript-style CSS property names when applying the browser-specific -ms--prefixed versions of the rules. If you encounter this, use the setAttribute function and you should be all right.

Some Common Properties

Using JavaScript you can modify any property of any element in a web document, in a similar manner to using CSS. I have already shown you how to access CSS properties, using either the JavaScript short form or the setAttribute function (to use exact CSS property names). Therefore, I won’t bore you by detailing all of these hundreds of properties. Rather, I’d like to show you how to access just a few of the CSS properties as an overview of some of the things you can do.

First let’s look at modifying a few CSS properties from JavaScript using Example 20-5, which first loads in the three earlier functions, then creates a <div> element, and finally issues JavaScript statements within a <script> section of HTML, to modify various attributes of the <div> (see Figure 20-1).

Example 20-5. Accessing CSS properties from JavaScript

<html>
    <head>
        <title>Accessing CSS Properties</title>
        <script src='OSC.js'></script>
    </head>
    <body>
        <div id='object'>Div Object</div>

        <script>
             S('object').border     = 'solid 1px red'
             S('object').width      = '100px'
             S('object').height     = '100px'
             S('object').background = '#eee'
             S('object').color      = 'blue'
             S('object').fontSize   = '15pt'
             S('object').fontFamily = 'Helvetica'
             S('object').fontStyle  = 'italic'
        </script>
    </body>
</html>

Figure 20-1. Modifying styles from JavaScript

You gain nothing by modifying properties like this, because you could just as easily have included some CSS directly, but shortly we’ll be modifying properties in response to user interaction—and then the real power of combining JavaScript and CSS will come through.

Other Properties

JavaScript also opens up access to a very wide range of other properties, such as the width and height of the browser and of any pop-up or in-browser windows or frames, and handy information such as the parent window (if there is one) and the history of URLs visited this session.

All these properties are accessed from the window object via the period operator (for example, window.name). Table 20-1 lists them all, along with descriptions of each.

Note

Many of these properties can be invaluable when targeting mobile phones and tablet devices, as they will tell you exactly how much screen space you have to work with, the type of browser being used, and so on.

Table 20-1. Common window properties

Property	Description
`closed`	Returns a Boolean value indicating whether or not a window has been closed
`defaultStatus`	Sets or returns the default text in the status bar of a window
`document`	Returns the `document` object for the window
`frames`	Returns an array of all the frames and iframes in the window
`history`	Returns the `history` object for the window
`innerHeight`	Sets or returns the inner height of a window’s content area
`innerWidth`	Sets or returns the inner width of a window’s content area
`length`	Returns the number of frames and iframes in a window
`location`	Returns the `location` object for the window
`name`	Sets or returns the name of a window
`navigator`	Returns the `navigator` object for the window
`opener`	Returns a reference to the window that created the window
`outerHeight`	Sets or returns the outer height of a window, including tool and scroll bars
`outerWidth`	Sets or returns the outer width of a window, including tool and scroll bars
`pageXOffset`	Returns the number of pixels the document has been scrolled horizontally from the left of the window
`pageYOffset`	Returns the number of pixels the document has been scrolled vertically from the top of the window
`parent`	Returns the parent window of a window
`screen`	Returns the `screen` object for the window
`screenLeft`	Returns the x coordinate of the window relative to the screen in all recent browsers except Mozilla Firefox (for which you should use `screenX`)
`screenTop`	Returns the y coordinate of the window relative to the screen in all recent browsers except Mozilla Firefox (for which you should use `screenY`)
`screenX`	Returns the x coordinate of the window relative to the screen in all recent browsers except Opera, which returns incorrect values; supported in versions of IE prior to 9
`screenY`	Returns the y coordinate of the window relative to the screen in all recent browsers except Opera, which returns incorrect values; supported in versions of IE prior to 9
`self`	Returns the current window
`status`	Sets or returns the text in the status bar of a window
`top`	Returns the top browser window

There are a few points to note about some of these properties:

The defaultStatus and status properties can be set only if users have modified their browsers to allow it (very unlikely).
The history object cannot be read from (so you cannot see where your visitors have been surfing), but it supports the length property to determine how long the history is, and the back, forward, and go methods to navigate to specific pages in the history.
When you need to know how much space there is available in a current window of the web browser, just read the values in window.innerHeight and window.innerWidth. I often use these values for centering in-browser pop-up alert or confirm dialog windows.
The screen object supports the read-only properties availHeight, availWidth, colorDepth, height, pixelDepth, and width, and is therefore great for determining information about the user’s display.

These few items of information will get you started and give you some ideas about many new and interesting things you can do with JavaScript. Of course, there are far more properties and methods available than can be covered in this chapter, but now that you know how to access and use properties all you need is a resource listing them all. I recommend you check out the following URL as a good initial place to start: http://tinyurl.com/domproperties.