Span, Stylesheet og DOM manipulation
Jeg har lavet følgende kode (som i øvrigt er det første stykke JS kode jeg har lavet der fylder mere end 2 linier):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test unit</title>
<style><!--
div.list {
background-color : #224466;;
}
span.item {
background-color : #E8EEF7;
padding: 0px 0px 3px 0px;
margin : 0px 0px 1px 0px;
width : 100%;
}
span.item:hover {
background: #66ff66;
}
-->
</style>
<script type="text/javascript">
var items = new Array();
items[0] = "foo";
items[1] = "bar";
items[2] = "baz";
function go() {
var list = document.getElementById('list');
var temp = new Array();
for(i = 0; i < items.length; i++) {
var spanItem = document.createElement("span");
spanItem.setAttribute("class", "item");
spanItem.appendChild(document.createTextNode(items[i]));
temp[i] = spanItem;
}
for(i = 0; i < temp.length; i++) {
list.appendChild(temp[i]);
}
}
</script>
</head>
<body onload="go()">
<input id="button" type="button" onclick="go()" value="go" />
<div class="list" id="list">
<span class="item">foo</span>
<span class="item">bar</span>
<span class="item">baz</span>
</div>
</body>
</html>
Jeg forventede at de span noder jeg indsætter i metoden "go" ville få samme style som de statiske span noder. Men det sker ikke, i hvertfald ikke i MSIE7b2 som jeg har testet med.
Hvordan får jeg de dynamiske span nodes til at blive vist med samme style som de statiske ?
Hvad er tricket :-)
