使用相同的类更改所有元素的背景颜色 [英] Changing background color of all elements with the same class

问题描述

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

以下是我目前的功能。

 < script type =text / javascript> 
 
函数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 =50height =55> 
< img src =iPhone / statusicon / 12.pngalt =id =forum_statusicon_12border =0>< / td> 
< td> 
< div class =forumtitle> 
< a class =forumtitle 12href =forumdisplay.php？f = 12action =asynconclick =check（this.className.split（''）[1]）>新闻和时事< / a>< / div> 
< / td> 
< td width =25> 
< div class =forumarrow>< img src =iPhone / chevron.pngalt =border =0>< / div> 
< / td> 
< / tr> 
  

表格行有两个类，我需要第二个（数字）是什么解决。当前的代码会给出错误指定了无效或非法的字符串。解析方案

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

 < script type =text / javascript> 
 
函数check（x）{
 elements = document.getElementsByClassName（x）; 
 for（var i = 0; i< elements.length; i ++）{
 elements [i] .style.backgroundColor =blue; 
} 
} 
 
< / script> 
 
< a href =＃class =firstonclick =check（this.className）>更改第一行< / a> 
< a href =＃class =secondonclick =check（this.className）>更改第二个< / 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

I have a link and a table row that have matching classes. When the link is clicked, I would like to change the background color of the row with the same class. For each case, there will be only one row with the same class.

Here is my current function.

   <script type="text/javascript">

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

Here is a part of the table row 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>

The table row has two classes, and I need the second one (the number) to be what is addressed. The current code gives the error "An invalid or illegal string was specified"

解决方案

You have several errors. You mixed classes with ids and also the class property is actually 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>

Check this jsfiddle

这篇关于使用相同的类更改所有元素的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！