为啥无法设置子节点的css属性
日期：2014-05-16 浏览次数：20475 次
为什么无法设置子节点的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';会没有任何效果？
------解决方案--------------------
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">
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
