Question

我需要在点击时将类样式属性颜色的值从红色更改为绿色。

<style>
.c1
{
color : RED;
}

</style>

<a id="a1" class="c1" onclick="changeclassstyle()">
Hi
</a>

<script>
function changeclassstyle()
{
/* here i need to change the style of class c1 */
}
</script>

我需要将c1类的颜色更改为GREEN。

注意：我不希望“ID”＆amp;我不想要创建新类并更改类名。我希望它以相同的类名发生。

Answer 1

function changeclassstyle() {
  var c = document.getElementsByClassName("c1");
  for (var i=0; i<c.length; i++) {
    c[i].style.color = "green";
  }
}

.c1 {
  color : RED;
}

<a id="a1" class="c1" onclick="changeclassstyle()">
Hi
</a>

Answer 2

<a id="a1" class="c1" onclick="changeclassstyle(this);">
Hi
</a>


<script>

function changeclassstyle(obj)
{
obj.style.color='green';
}
</script>

Answer 3

jQuery版

＆＃13;

function changeToGreen(elem) {
  $("." + elem.className).css("color", "green");
}

＆＃13;

.c1 {
  color: RED;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a id="a1" class="c1" onclick="changeToGreen(this)">
Hi
</a>
<br/>
<p class="c1">
  Test
</p>

＆＃13;

Answer 4

如果您不想将javascript添加到标签本身，您可以这样做：

var c= document.getElementsByClassName("someClass");


       for (var i = 0; i < c.length; i++)  {
            c[i].onclick=function(){       //on click here instead of on tag

                this.style.color="green";
            }
        }

Onclick更改类样式值而不更改类名

4 个答案: