gpt4 book ai didi

javascript - 使用 Javascript 修改 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 04:17:08 24 4
gpt4 key购买 nike

我可以通过如下简单的代码使用 Javascript 更改元素的 CSS ID:

<div id="teststyle1">Test Text, 1-1</div>

<button type="button" onclick="document.getElementById('teststyle1').style.color='red'"> Test 1 </button>

但是,当我尝试添加具有相同 ID 的第二行文本(如下面的完整示例所示)时,只有其中一个被更改。是否有一个简单的解决方案可以解决这两个元素都会更改的问题?

例子:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#teststyle1{
text-decoration: underline;
}
</style>
</head>
<body>

<div id="teststyle1">Test Text, 1-1</div>
<div id="teststyle1">Test Text, 1-2</div>

<button type="button" onclick="document.getElementById('teststyle1').style.color='red'">Test 1</button>

</body>
</html>

非常感谢任何帮助!

最佳答案

ID 应该是唯一的。您想改用类。

<div class="teststyle1">Test Text, 1-1</div>
<div class="teststyle1">Test Text, 1-2</div>

<button type="button" onclick="Array.prototype.forEach.call(document.getElementsByClassName('teststyle1'), function(element) { element.style.color='red'; })"> Test 1 </button>

虽然为了可读性和良好的风格,我建议:

<div class="teststyle1">Test Text, 1-1</div>
<div class="teststyle1">Test Text, 1-2</div>

<button id="my_button" type="button"> Test 1 </button>
<script>
document.getElementById('my_button').onclick = function() {
Array.prototype.forEach(document.getElementsByClassName('teststyle1'), function(element) {
element.style.color='red';
});
};
</script>

关于javascript - 使用 Javascript 修改 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19751280/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com