ptg16476052Modifying Styles on the Page 50718
Retrieving and Changing Style Sheet Properties
You can also modify styles on the page directly. If I change the event handler in the pre-
vious example to contain the following co de, the text will be underlined when the user
clicks the
, as shown in Figure 18.3:
$(this).css("text-decoration", "underline");
jQuery enables you to manipulate any styles on the page in this fashion. You can also
retrieve the values of CSS properties using the css() method; just don’t leave out the
argument. If I instead change the body of the event handler to the following, the browser
will display the current font size used in the
that the user clicked:
alert("The font size is " + $(this).css("font-size"));
A browser window with the alert displayed appears in Figure 18.4.
FIGURE 18.2
The state of the
page after the ele-
ment has been
clicked.FIGURE 18.3
The text is under-
lined after the
user clicks on the
<div>.