Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Change an Element’s CSS in CSS3

The jQuery library for CSS3 is mostly used to perform these sorts of necessary, but low-level tasks. You can, however, use jQuery to perform some fancier tasks by incorporating CSS. There’s an actual .css() method you can use to access the CSS associated with an object or to modify the CSS used by that object.

You always see the change made to the CSS because the jQuery changes are inline, rather than internal or external CSS.

Imagine that you want to create a formatted multiplication table that automatically changes the color of a selected cell to make it easier to see. The example uses JavaScript to generate the table. Of course, you could also manually generate the table using standard code, but this approach is simpler. (You can find complete code for this example in the \Chapter 06\jQuery folder of the downloadable code as NestedLoop.html.)

// Start the table.
document.write("<table>");
// Start a heading row.
document.write("<tr>");
// Create a heading.
for (var i = 0; i <= 10; i++)
{
 if (i == 0)
 {
 document.write("<th />");
 }
 else
 {
 document.write("<th>" + i + "</th>");
 }
}
// End the heading row.
document.write("</tr>");
for (var i = 1; i <= 10; i++)
{
 // Start a data row.
 document.write("<tr>")
 // Create the row header.
 document.write("<th>" + i + "</th>");
 for (var j = 1; j <= 10; j++)
 {
 // Add each data element.
 document.write("<td>" + i * j + "</td>");
 }
 // End a data row.
 document.write("</tr>")
}
// End the table.
document.write("</table>");

This code starts by creating a <table> and creating a heading row, <tr>, for it. The loop simply adds the numbers 1 through 10 to the header using heading, <th>, tags. After the header row is complete, the code then begins to create the data rows.

Each data row begins with a heading, followed by the multiplied values. The double loop creates a square table that shows the multiplied values all the way up to 10 * 10.

In order to make this example pleasant to look at, you’d want to use CSS to differentiate the rows and columns. The highlighted cell would use a larger font size and a different font color. In order to make this change, the example uses the .Selected internal CSS style shown here.

<style type="text/css">
 .Selected
 {
 color: blue;
 font-size: 30px;
 font-weight: bold;
 }
</style>

The example now contains a table with multiplied values and a special style for the selected cell. However, it still lacks any formatting for the rows and there isn’t any way to select a specific cell so that it will have the required special formatting. The following code presents one way to accomplish these goals.

// Perform some basic formatting.
$("th:even").css("background-color", "lightblue");
$("th:odd").css("background-color", "lightgreen");
$("td:even").css("background-color", "lightgreen");
$("td:odd").css("background-color", "lightblue");
$("th, td").css("width", "50px");
// Add a special effect.
$("td").mouseover(
 function()
 {
 $(this).toggleClass("Selected");
 });
$("td").mouseout(
 function()
 {
 $(this).toggleClass("Selected");
 });

The formatting consists of selecting the <th> and <td> elements and then using a basic filter to choose between odd and even elements. The odd elements receive one background color, and the even elements receive another. The code then uses a multiple selector to apply the same width formatting to each of the cells.

By combining selectors and selector filters, you can create some interesting effects with little programming. It’s important to remember that this table is programmatically generated, so applying formatting to it could be difficult.

The special effect starts with the <td> elements. When a user hovers the mouse pointer over a particular element, the code applies the .Selected CSS formatting to it. Likewise, when the user places the mouse pointer somewhere else, the effect is toggled back to the original formatting used by the <td> element. Toggling the formatting is a quick way to create a mouseover effect.

image0.jpg
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.