Fatal编程技术网

用Javascript修改CSS

javascript html css

用Javascript修改CSS,javascript,html,css,lines,Javascript,Html,Css,Lines,我可以通过如下简单代码使用Javascript更改项目的CSS ID： <div id="teststyle1">Test Text, 1-1</div> <button type="button" onclick="document.getElementById('teststyle1').style.color='red'"> Test 1 </button> 测试文本，1-1 测试1 但是，当我尝试添加具有相同ID的第二行文本（如下面的

我可以通过如下简单代码使用Javascript更改项目的CSS ID：

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

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

测试文本，1-1
测试1
但是，当我尝试添加具有相同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>


#teststyle1{
文字装饰：下划线；
}
测试文本，1-1
测试文本，1-2
测试1
非常感谢您的帮助

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>

测试文本，1-1
测试文本，1-2
测试1
尽管为了可读性和良好的风格，我还是建议：

<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>

测试文本，1-1
测试文本，1-2
测试1
document.getElementById（'my_button'）。onclick=function（）{
Array.prototype.forEach（document.getElementsByClassName（'teststyle1'），函数（element）{
element.style.color='red'；
});
};
您不应该在不同的元素上使用ID。尝试使用类，然后javascript将更改类下的所有元素。id是唯一的。如果您想使用类，它总是首先应用匹配

<div class="class1">Test Text, 1-1</div>
<div class="class1">Test Text, 1-2</div>
ID应该是唯一的，也许可以采用使用类名的方法从IE9+开始工作实际上，不是内联更改样式，而是设置另一个类名，将所有样式放在一个位置会更干净，不应该，必须是唯一的。这非常基本。在启动JavaScript之前，您可能希望掌握CSS和HTML的诀窍。
NodeList
不继承数组原型，因此没有
forEach
方法。您可以使用
[].slice.call将其放入一个数组中。

$('.class1:eq(0)').html();
$('.class1:eq(1)').html();