0

我可以通过这样的简单代码使用 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>

任何帮助是极大的赞赏！

4

3 回答 3

2

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>
于 2013-11-03T08:57:26.170 回答
0

你不应该在不同的元素上使用 id。尝试使用类，然后javascript将更改类下的所有元素

于 2013-11-03T09:04:02.477 回答
0

id 是唯一的，如果你想上课，它总是应用第一个匹配

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

在jquery中你可以根据索引访问

$('.class1:eq(0)').html();
$('.class1:eq(1)').html();
于 2013-11-03T09:09:57.150 回答