23.04.2013 Views

javascript

javascript

javascript

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Figure 8–1. The blue sprite contains all 12 button images.<br />

Querying a Style Attribute<br />

CHAPTER 8 ■ SCRIPTING CSS<br />

Open eight.html in Firefox, and then press F12 to enable Firebug. If you’re just joining us, flip back to<br />

the preface for details on how to do this.<br />

Now let’s try querying the style attribute for the Nike link. Insofar as its markup tag does not<br />

contain a style attribute, ElementCSSInlineStyle.style will contain a bunch of "" empty strings. That<br />

makes this a pretty dull read. Nevertheless, take a peek at some CSS properties:<br />

var myStyle = document.getElementById("nike").style;<br />

myStyle.backgroundPosition;<br />

// ""<br />

myStyle.backgroundImage;<br />

// ""<br />

myStyle.left;<br />

// ""<br />

myStyle.top;<br />

// ""<br />

As Figure 8–2 displays, JavaScript returns one "" empty string after another. If you abide by the<br />

separation of markup content from CSS presentation credo, this will be the case for every Element node<br />

in the DOM tree—at least initially.<br />

313

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!