更改具有相同类的所有元素的背景颜色答案

【问题标题】：Changing background color of all elements with the same class更改具有相同类的所有元素的背景颜色
【发布时间】：2013-01-13 19:18:11
【问题描述】：

我有一个链接和一个具有匹配类的表格行。单击链接时，我想更改具有相同类的行的背景颜色。对于每种情况，只有一行具有相同的类。

这是我当前的功能。

   <script type="text/javascript">

function check(x) {
    elements = document.getElementsByClassName(x);
    for (var i = 0; i < elements.length; i++) {
        elements[i].bgColor="blue";
    }
}
</script>

这是表格行脚本的一部分：

<tr class="alt1 12">
<td width="50" height="55">
<img src="iPhone/statusicon/12.png" alt="" id="forum_statusicon_12" border="0"></td>
<td>
<div class="forumtitle">
<a class="forumtitle 12" href="forumdisplay.php?f=12" action="async" onclick="check(this.className.split(' ')[1])">News and Current Events</a></div>
</td>
<td width="25">
<div class="forumarrow"><img src="iPhone/chevron.png" alt="" border="0"></div>
</td>
</tr>

表格行有两个类，我需要第二个（数字）来解决问题。当前代码给出错误“指定了无效或非法的字符串”

【问题讨论】：

标签： javascript html

【解决方案1】：

您有几个错误。您将类与 id 混合在一起，并且 class 属性实际上是 className

<script type="text/javascript">

function check(x) {
    elements = document.getElementsByClassName(x);
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor="blue";
    }
}

</script>

<a href="#" class="first" onclick="check(this.className)">change first row</a>
<a href="#" class="second" onclick="check(this.className)">change second</a>
<!--        FIX ( id -> class )                FIX ( class -> className ) -->
<table>
<tr class="first">
<td>test1</td>
</tr>


<tr class="second">
<!--FIX ( id -> class ) -->
<td>test2</td>
</tr>
</table>

查看jsfiddle

【讨论】：

这对我来说是迄今为止最好的，没有理由保留奇怪的 id/class 组合，而且 jQuery 对于如此简单的操作来说太过分了。
很抱歉，我无意中发布了错误的代码。只是最后一个问题...我意识到我为每一行分配了两个类...脚本自动分配第一个类，这个广告另一个由空格分隔。我该如何处理这种情况？我总是想把第二个类发送给这个函数。
只需将this.className 替换为this.className.split(' ')[1]
对于设置元素的行，我收到错误“指定了无效或非法的字符串”。我只是用我更新的代码和实际输出而不是示例修改了原始帖子。
我使用了错误的答案 JS 代码，得到它的工作，谢谢！

【解决方案2】：

你也可以在没有 jQuery 的情况下使用 querySelectorAll() 轻松完成：

<script type="text/javascript">

function check(selector)
{
    var elements = document.querySelectorAll(selector);
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = "blue";
    }
}
</script>

<a href="#" class="first" onclick="check('.' + this.className)">change first row</a>
<a href="#" id="second" onclick="check('#' + this.id)">change second</a>

<table>
<tr class="first">
    <td>test1</td>
</tr>


<tr id="second">
    <td>test2</td>
</tr>

【讨论】：

【解决方案3】：

jQuery 简化了它：

$(".button").click(function(){
 var class = $(this).attr("data-class");
 var color = $(this).attr("data-color");
 $("."+class).css("background-color",color);
});

.button 是要应用到按钮的类，添加 data-class 是您要更改其背景颜色的类，data-color 是您要更改的颜色。

【讨论】：

我对 jQuery 很陌生，但有两个问题，首先我如何动态制作它？类名都将由脚本创建。此外，在尝试对其进行测试时，出现错误“）在参数列表后丢失”
已更新。另一个注意事项：不要在一个页面上多次使用相同的id。无效。

【解决方案4】：

有同样的问题。需要更改纯 js 中所有元素的背景（深色主题）。由于出现一些奇怪的错误，无法在页面上添加 jQuery（此文档需要分配“TrustedHTML”）

elements = document.querySelectorAll("*");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor="#777";
    elements[i].style.color="#ddd";
}

【讨论】：