FireFox兼容问题。

Question

小弟才用JavaScript，现在碰到一个问题搞不明白。 function change(labelId,parseLabel, containerId, parseContainer) {
var curlabel = document.getElementById(labelId);//获取当前要显示的标签
var labels = document.getElementById(parseLabel).childNodes;//当前标签的父标签的子标签
for (var loop=0; loop<labels.length; loop++) {
var label = labels[loop];
if (curlabel.id != label.id) {
label.style.cssText="background:url(image/pl01c.jpg);color:#FF0000;";//切换背景图为未选中状态
}
}
curlabel.style.cssText="background:url(image/pl01.jpg);color:#FF0000;";//切换背换图为选定状态
var curCon = document.getElementById(containerId);
var cons = document.getElementById(parseContainer).childNodes;

for (var iLoop=0; iLoop<cons.length; iLoop++) {
var con = cons[iLoop];
if (con.id!=curCon.id) {
con.style.cssText="display:none";//隐藏没有选中的内容
}
}
curCon.style.cssText="display:block";//显示选中内容
}
这是个标签式浏览的脚本，在IE下正常。可是在FireFox下会报"错误： label.style has no properties"。
网上查后说FireFox不支持cssText，可以用setAttribute()。
可是我写了setAttribute("class","定义好的class名称");和setAttribute("className","定义好的class名称");
这两种结果在IE和FireFox下都报错了，说“定义好的class名称"不是一个函数。
我只要实时修改一个元素的css，最好是能实时切换整个CSS。
html是<ul id="Label">   
  <li id="label0" name="label0" class="showLabel" onmouseover="change('label0','Label','container0','Container')"><a href="#">one</a></li>   
  <li id="label1" name="label1" class="hideLabel" onmouseover="change('label1','Label','container1','Container')"><a href="#">two</a></li>   
  <li id="label2" name="label2" class="hideLabel" onmouseover="change('label2','Label','container2','Container')"><a href="#">three</a></li> 
</ul>
  <div id="Container">   
    <div id="container0" name="container0" class="showCon"><img src="image/pl03.jpg"></div>   
    <div id="container1" name="container1" class="hideCon"><img src="image/pl04.jpg"></div>   
    <div id="container2" name="container2" class="hideCon"><img src="image/pl05.jpg"></div>   
  </div>

Answer 1

style.background='';
style.display='';
style.color='';

Answer 2

现在是var labels = document.getElementById(parseLabel).childNodes;拿到子元素数组后，设置style报has no properties。

Answer 3

var labels = document.getElementById(parseLabel).childNodes;改成var labels = curlabel.parentNode.childNodes;测试一下

Answer 4

啊,有个问题你要注意
在ff下,childNodes可是包含文字节点的也就是说
<span>aaa</span>
在ff下aaa也算一个节点,当然没有style属性了所以循环node的时候,需要判断nodeType==1,或者nodeName="li";
加个判断,应该就可以通过了

Answer 5

应该是fx中节点解析了ie不同，如下例子；
<ul>
<li id="o1111">12122</li>
<li id="o2222">12122</li>
</ul><script>
 alert(document.getElementsByTagName('ul')[0].firstChild.id);
alert(document.getElementsByTagName('ul')[0].childNodes.length)
</script> fx中含有空白文本节点。。问题就在这里

Answer 6

var oElement=document.getElementById("xxx");
oElement.setAttribute("class","定义好的class名称");
oElement.setAttribute("className","定义好的class名称"); 
这个应该可行的吧如果使用cssText的话,
label.style.cssText="background:url(image/pl01c.jpg);color:#FF0000;";
label.setAttribute("style","background:url(image/pl01c.jpg);color:#FF0000");这两种都应该可行的

Answer 7

总算是知道原因了，因为FireFox的childNodes把空行之类的也算作子结点（不知道算不算BUG）。
IE没有这个问题。如Navymk说的，却实是要判断一下传进来的标签名称。