Avatar billede soreno Praktikant
13. maj 2006 - 12:21 Der er 1 løsning

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 :-)
Avatar billede soreno Praktikant
13. maj 2006 - 13:39 #1
Med indspiration i dette:
http://www.howtocreate.co.uk/tutorials/javascript/domcss

Sættes class på et element med
spanItem.className = "item";
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester