Javascript/CSS possibly DOM issue
Anyone see any reason why this doesn't run in Mozilla? (OK in IE, but if you're seizure prone don't run it). I get a "Error: outer.style has no properties - Line: 61". I'm thinking IE is returning an interface that supports both HTML and XML DOM, while Moz is returning one that only supports XML. Else I'm overlooking something.
Thanks.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>BW Test Page</title>
<style type="text/css" media="screen" title="Default">
div {
border: none;
padding: 10px;
margin: 0px;
}
.container {
border: 3px solid blue;
padding: 0px;
}
.black {
color: black;
background-color: black;
}
.white {
color: white;
background-color: white;
}
</style>
<script type="text/javascript">
var inner;
var outer;
var iSize = 0;
var oSize = 10;
function bw() {
var vdiv = document.getElementById('mdiv');
//vdiv.style.borderColor = "red";
outer = vdiv.firstChild;
inner = outer;
oSize--;
if (oSize == 0) {
oSize = 10;
//get the innermost div
while ( inner.firstChild ) {
if ( inner.className == "black" ) {
inner.className = "white";
} else {
inner.className = "black";
}
inner = inner.firstChild;
}
} else {
//get the innermost div
while ( inner.firstChild ) {
inner = inner.firstChild;
}
}
iSize = 10 - oSize;
outer.style.padding = oSize + "px";
inner.style.padding = iSize + "px";
setTimeout("bw()", 1);
}
</script>
</head>
<body>
<div id="mdiv" class="container">
<div class="black">
<div class="white">
<div class="black">
<div class="white">
<div class="black">
<div class="white">
<div class="black">
<div class="white" style="padding: 0px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div onclick="bw();">Click</div>
</body>
</html>
