Clo*_*ock -1 html javascript css
因此，当我单击<p>家庭班级的标签时，我希望它将颜色更改为绿色，但不起作用，请问为什么。单击可以很好地注册（因为console.log（“ test”）可以很好地显示），但是其余更改颜色的功能将无效。这是我的css，html和js代码（该js代码包含在HTML中，因此它不是外部文件或其他任何文件）：
.greyRect {
height:150px;
width:1350px;
background-color: #D3D3D3;
}
h1 {
text-align: center;
}
h2 {
text-align: center;
}
.home {
box-sizing: border-box;
width:80px;
height:35px;
line-height: 2;
position: relative;
left:350;
color:white;
}
.casinocraps {
background-color: grey;
box-sizing: border-box;
width:120px;
height:35px;
text-align: center;
line-height: 2;
position: relative;
left:460;
bottom:50;
color:white;
}
.tictactoe {
background-color: grey;
box-sizing: border-box;
width:90px;
height:35px;
text-align: center;
line-height: 2;
position: relative;
left:600;
bottom:100;
color:white;
}
.bingo {
background-color: grey;
box-sizing: border-box;
width:80px;
height:35px;
text-align: center;
line-height: 2;
position: relative;
left:700;
bottom:150;
color:white;
}
.concentration {
background-color: grey;
box-sizing: border-box;
width:100px;
height:35px;
text-align: center;
line-height: 2;
position: relative;
left:800;
bottom:200;
color:white;
}
footer {
text-align: center;
line-height: 4;
position: relative;
top:125;
right:15;
height:70px;
width:1365px;
background-color: #D3D3D3;
}
.border {
height: 50px;
width: 100px;
border: 4px solid green;
background-color: #555;
position: relative;
top:20;
left:100;
}
.rectangle {
height: 50px;
width: 100px;
background-color: #555;
position: relative;
top:50;
left:100;
}<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="cssForAss4.css">
</head>
<body>
<header class="greyRect" >
<h1>Assignment 1</h1>
<h2>Home Page</h2>
<nav>
<p class="home" onclick="selectHome()">
Home
</p>
<p class="casinocraps">
<b>Casino Craps</b>
</p>
<p class="tictactoe">
<b>Tic-Tac-Toe</b>
</p>
<p class="bingo">
<b>Bingo</b>
</p>
<p class="concentration">
<b>Concentration</b>
</p>
</nav>
<div class="border">
</div>
<footer >Footer</footer>
</header>
<script>
function selectHome() {
console.log("test");
document.getElementsByClassName("home").style += "background-color:green;";
}
</script>
</body>
</html>Sco*_*cus 10
其他人建议.getElementsByClassName("home")[0]，这是一个糟糕的主意。
首先，.getElementsByClassName()返回所有匹配元素的节点列表。如果您只对第一个感兴趣，则没有必要先找到那个，然后继续扫描以寻找更多匹配项，然后丢弃除找到的第一个之外的所有匹配项，这就是此代码的作用。
其次，.getElementsByClassName()返回“活动”节点列表。这意味着，每次与列表进行交互时，都会再次在整个DOM中搜索匹配项，以确保您在列表中设置的是最新的。这在动态添加和删除节点的应用程序中很有用，但是这些用例并不常见。
仅供参考：.getElementsByTagName()，.getElementsByName()并且node.childNodes还返回活动节点列表。
当不需要保持最新列表时，.querySelectorAll()该走的路。坦率地说，即使您确实需要更新的节点列表，也可以更好地使用.querySelectorAll()它，只需在需要更新的列表时手动再次运行它即可。
这是一个很好的页面，讨论了这一点，这就是它要说的：
如何考虑活动对象？
实物不直观。您可以将其视为延迟评估或惰性评估。访问活动对象的结果时，将重新计算活动对象的方法或属性。
这是一个JSPerf，用于显示活动节点列表和静态节点列表之间的性能差异。
但是，在这种情况下，我们甚至不需要节点列表，而只需要一个节点。正确的解决方案是：
document.querySelector(".home");
.querySelector()扫描文档以查找与提供的选择器匹配的第一个元素，如果找到，则返回对该单个节点的引用。否则，返回undefined。
| 归档时间： |
|
| 查看次数： |
282 次 |
| 最近记录： |