为什么无法设置子节点的css属性
<html>
<head>
<style type="text/css">
.highlight {
background-color: blue;
}
</style>
<script type="text/javascript">
var my = document.getElementById('try');
my.firstChild.className = 'highlight'; //无效
//如果是=================
my.firstChild.parentNode.className = 'highlight'; //work!同时测试是否firstChild有错
</script>
</head>
<body>
<ul id='try'>
<li>aaaa</li>
<li>bbbb</li>
</ul>
</body>
</html>
为什么这样设置my.firstChild.className = 'highlight';会没有任何效果？ css 节点 class node
[解决办法]
my.firstChild.className = 'highlight'; //无效
console.log("my.firstChild.nodeType=" +my.firstChild.nodeType);//=3
就是说firstChild是一个文本节点，无法设置className .
[解决办法]
看看该节点是否有className属性
[解决办法]
在google,firefox下，空白行也算节点的，把HTML写成下面那样，不要换行就可以了。
<ul id='try'><li>aaaa</li><li>bbbb</li></ul>
[解决办法]
还有一点忘记说了，要么把script标签放在最后面，要么把JS写到window.onload里面，确保元素已经加载完了。
<html>
<head>
<style type="text/css">
.highlight {
background-color: blue;
}
</style>
<script type="text/javascript">
window.onload = function(){
var my = document.getElementById('try');
var nodes = my.childNodes;
for(var i = 0 ; i < nodes.length ; ++i){
if(nodes[i].nodeType==1){
nodes[i].className='highlight';
break;
}
}
}
</script>
</head>
<body>
<ul id='try'>
<li>aaaa</li>
<li>bbbb</li>
</ul>
</body>
</html>