HTML and CSS Reference
In-Depth Information
catch(e){
ret = false;
}
document.body.removeChild(el);
return ret;
}
2.
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.
3.
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) {
title.style.background = "#6699cc";
title.style.border = "1px solid #c0c0c0";
}
else {
title.style.background = "#c0c0c0";
title.style.border = "1px solid #6699cc";
}
}
}
4.
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.
5.
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
.
