02.06.2013 Views

Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

SHOW MORE
SHOW LESS

Create successful ePaper yourself

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

.height() <strong>and</strong> .width()<br />

CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS<br />

To obtain the height or width of an element, the .height() <strong>and</strong> .width() methods are h<strong>and</strong>y. Both return<br />

a value without units, meaning the value returned is an integer (if the element is 68 pixels high,<br />

.height() will return 68). This differs from .css(), which will return the units of measure as well.<br />

Get the height of the form <strong>by</strong> running the following code:<br />

console.log("Form height: "+$("form").height()+"px");<br />

This outputs the following in the console:<br />

>>> console.log("Form height: "+$("form").height()+"px");<br />

Form height: 238px<br />

■ Note The actual height returned may vary on your browser depending on which operating system you’re using.<br />

By passing a value to .height() or .width(), a new value is set. Make all paragraphs on the page 100<br />

pixels high with a yellow background using the following code:<br />

$("p").height(100).css("background","yellow");<br />

Upon execution, all paragraph heights change <strong>and</strong> their backgrounds become yellow (see<br />

Figure 2-18).<br />

Figure 2-18. The modified height <strong>and</strong> backgrounds of all document paragraphs<br />

61

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

Saved successfully!

Ooh no, something went wrong!