HTML and CSS Reference
In-Depth Information
To change the background color of each cell, you would then loop through the object
collection, setting the
backgroundColor
property to the color value (233, 207, 29):
Internet Explorer 8
does not support the
getElementsByClass-
Name()
method, but it
does support the
query-
SelectorAll()
method
to allow programmers
to create object collec-
tions based on class name
values. Internet Explorer
versions 9 and above sup-
port both methods.
for (var i = 0; i < puzzleCells.length; i++) {
puzzleCells[i].style.backgroundColor = “rgb(233, 207, 29)”;
}
If you wanted to reference only the first element that matches a selector pattern, you
could use the following JavaScript method:
querySelector(
selector
)
Note that you cannot use pseudo-elements or pseudo-classes with either the
querySelector()
or
querySelectorAll()
methods.
Creating an Object Collection Based on a Selector Pattern
• To create an object collection based on a CSS selector pattern, use
document.querySelectorAll(
selector
)
where
selector
is a CSS selector pattern.
• To return only the first object based on a CSS selector pattern, use the following:
document.querySelector(
selector
)
You'll create the setupPuzzle() function now using the
querySelectorAll()
method,
and then you'll run that function whenever the browser swaps a new puzzle into the
Web page.
To change the background color of every table cell:
◗
1.
Return to the
hanjie.js
file in your text editor.
◗
2.
Directly below the swapPuzzle() function, insert the following code as shown in
Figure 13-14:
function setupPuzzle() {
/* Match all of the data cells in the puzzle */
var puzzleCells = document.querySelectorAll(“#hanjieGrid td”);
/* Set the initial color of each cell to gold */
for (var i = 0; i < puzzleCells.length; i++) {
puzzleCells[i].style.backgroundColor = “rgb(233, 207, 29)”;
}
}
Figure 13-14
creating the setupPuzzle() function
selects all of the data
cells in the hanjieGrid
puzzle table
sets the background
color of each cell to gold
