如何使用JS修改HTML元素的样式(使用CSS在外部进行样式设置)? [英] How to modify style to HTML elements (styled externally with CSS) using JS?
问题描述
所以当我单击家庭课程的<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>
推荐答案
其他人建议 .getElementsByClassName("home")[0] ，这是一个糟糕的主意.
Others have suggested .getElementsByClassName("home")[0], which is a terrible idea.
首先，.getElementsByClassName()返回所有匹配元素的节点列表.如果您只对第一个感兴趣，则没有必要先找到那个，然后继续扫描以寻找更多匹配项，然后丢弃除找到的第一个之外的所有匹配项，这就是此代码的作用.
First, .getElementsByClassName() returns a node list of all the matching elements. If you are only interested in the first one, it makes no sense to find that one and then keep scanning for more matches and then discard all but the first one found, which is what this code does.
第二，.getElementsByClassName()返回活动"节点列表.这意味着，每次与列表进行交互时，都会再次在整个DOM中搜索匹配项，以确保您在列表中设置的是最新的.这在动态添加和删除节点的应用程序中很有用，但是这些用例并不常见.
Second, .getElementsByClassName() returns a "live" node list. This means that every time you interact with the list, the entire DOM is searched again for matches, ensuring that you have the most up to date set in your list. This can be useful in applications where nodes are being added and removed dynamically, but those use cases aren't as common.
仅供参考:.getElementsByTagName()，.getElementsByName()和node.childNodes也会返回活动节点列表.
FYI: .getElementsByTagName(), .getElementsByName(), and node.childNodes also return live node lists.
如果不需要保持最新列表，请 .querySelectorAll() 是必经之路.坦率地说，即使您确实需要更新的节点列表，使用.querySelectorAll()还是更好，只需在需要更新的列表时手动再次运行它即可.
When it's not necessary to keep an up to date list, .querySelectorAll() is the way to go. And frankly, even if you do need an updated node list, you're still better off with .querySelectorAll() and just run it again manually at the point where you need an updated list.
这是一个好页面，对此进行了讨论，这就是它的要表达的意思:
Here's a good page that discusses this and here's what it has to say:
如何考虑动态对象?
活动对象不直观.你可以认为它是延迟的 评估或懒惰评估. 活动对象的方法或属性为 在访问他们的结果时重新计算.
Live object is not intuitive. You can think of it as delayed evaluation or lazy evaluation. Method or property of live object is re-computed when their result is accessed.
这是一个JSPerf ，以显示一个实时和静态节点列表.
And here's a JSPerf to show the performance difference between a live and static node list.
但是，在这种情况下，我们甚至不需要节点列表，而只需要一个节点.正确的解决方案是:
But, in this case, we don't even want a node list, we just want a single node. The correct solution would be:
document.querySelector(".home");
.querySelector() 扫描文档以查找与提供的选择器匹配的第一个元素，如果找到，则返回对该单个节点的引用.否则，它返回undefined.
这篇关于如何使用JS修改HTML元素的样式(使用CSS在外部进行样式设置)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
