Question

現在我有a元素將按鈕的顏色更改爲藍色......我想要做的事情我認爲非常簡單，但是我對CSS沒有足夠的瞭解。

我想在不刪除當前類的情況下執行另一個類，我該怎麼做？

jsFiddle

代碼：

<div> 
<div class='btn btn-success'> 
<a href='javascript:Addlog(" + id + ");' role='button'> 
<i class='fa fa-pencil-square-o'></i> Complete</a> 
</div></div> 

CSS：

a, .a { 
    color: #003F8F; 
} 

a:hover, a:focus { 
    color: #23527c; 
    text-decoration: underline; 
} 

我想補充一點，如：

a, .a { 
     color: white; 
    } 

    a:hover, a:focus { 
     color: white; 
     text-decoration: none; 
    } 

但不刪除當前的CSS爲不影響已存在的代碼

Answer 1

使用CSS類，然後可以從任意元素動態添加或刪除該類。

.light { 
    color: white; 
} 

a.light:hover, 
a.light:focus { 
    color: white; 
    text-decoration: none; 
} 

JS例如，假設你的鏈接有class="color-change-button"：

document.querySelector('.color-change-button').addEventListener('click', function() { 
    this.classList.toggle('light'); 
}); 

https://jsfiddle.net/DTcHh/27351/