所以当我点击<p>
家庭class的标签时,我希望它把颜色改为绿色,但它不起作用,我想知道为什么。点击注册正常(因为 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>