HTML and CSS Reference
In-Depth Information
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
<div>
that the user clicked:
alert(“The font size is “ + $(this).css(“font-size”));
A browser window with the alert displayed appears in Figure 16.4.
FIGURE 16.4
An alert box dis-
playing the value
of a CSS property.
Using these techniques, you can build pages with expanding and collapsing lists, add
borders to links when users mouse over them, or allow users to change the color scheme
of the page on-the-fly.
Not only can you modify the styles on the page using jQuery, but you can also modify
the content of the page itself. It provides methods that enable you to remove content
from the page, add new content, and modify existing element, too.
Manipulating Classes
jQuery provides a number of methods for manipulating the classes associated with ele-
ments. If your page already has a style sheet, you might want to add or remove classes
from elements on-the-fly to change their appearance. In the following example page,
shown in Figure 16.5, the class highlighted is added to paragraphs when the mouse is
moved over them and removed when the mouse moves out:
<!DOCTYPE html>
<html>
<head>
<title>
Altering Classes on the Fly
</title>
<script src=”jquery-1.4.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function () {
$(“p”).mouseenter(function () {
$(this).addClass(“highlighted”);
});
