HTML and CSS Reference
In-Depth Information
ret = false;
return ret;
This code creates a new style element and adds the selector in question. it then
checks to see if it is actually there. if not, the selector is not supported. This is done
in a try/catch block in case older browsers do not support either the style.
sheet.rules or style.sheet.cssRules properties.
now with our handy supportsSelector() function, you can implement the manual
striping technique. Add the following code to the same script element:
if (!supportsSelector(":nth-child(2n+0)")) {
var titles = document.getElementById("titles");
var articles = titles.getElementsByTagName("article");
for (var i = 0; i < articles.length; i++) {
var title = articles[i];
if (i % 2) { = "#6699cc"; = "1px solid #c0c0c0";
else { = "#c0c0c0"; = "1px solid #6699cc";
if the :nth-child selector is not supported, this code gets the #titles element
using the getElementById() function. This is the section element that contains
a series of article elements; one for each book. it then gets an array of child
article elements using the getElementsByTagName() function. note that this
method is invoked on the titles object and not the document object. once it has
the array of elements, the code simply iterates the array, modifying the background
and border properties.
Save your changes and press F5 to debug the application. Change the browser
mode to iE7 and the page should look like Figure 7-12 .
Search WWH ::

Custom Search