如何使用 JS 将样式修改为 HTML 元素(使用 CSS 在外部设置样式)? [英] How to modify style to HTML elements (styled externally with CSS) using JS?
本文介绍了如何使用 JS 将样式修改为 HTML 元素(使用 CSS 在外部设置样式)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以当我点击家庭类的 <p> 标签时，我希望它改变颜色为绿色，但它不起作用，并知道为什么.点击注册正常(因为 console.log("test") 显示得很好)但其余的更改颜色的功能将不起作用.这是我的 css、html 和 js 代码(js 代码包含在 HTML 中，所以它不是外部文件或任何东西):
so when i click on the <p> tag of the home class, i want it to change
color to green but it doesn't work and idk why. the click registers fine
(as the console.log("test") displays just fine) but the rest of the function to change the color won't work. here's my css, html and js code (the js code is contained in the HTML, so it's not an external file or anything):
.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><页脚>页脚</页脚></标题><脚本>功能选择家(){控制台日志(测试")；document.getElementsByClassName("home").style += "background-color:green;";}
