Onclick 更改 Class 樣式值而不更改 Class 名稱

Question

我需要在單擊時將 Class 樣式屬性顏色的值從紅色更改為綠色。

<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 class 的顏色更改為綠色。

注意：我不想用“ID”來完成，我不想創建新的 Class 並更改 class 名稱。 我希望它以相同的 class 名稱發生。

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

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

 .c1 { color: RED; } 

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

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";
            }
        }

Answer 5

https://developer.mozilla.org/es/docs/Web/CSS/:active

偽類：活動

.class-label {  
    display: flex;
    width: 100px;
    height: 60px;
    background-color:rgb(201, 201, 201) ; 
    padding: 10px;
    box-sizing: border-box;
    margin: 10px;
    border: 1px solid;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    font-family: monospace;  
}

.class-label:active {
    background-color: salmon;
    color: white;
}