他の要素に影響を与えずにCSSスタイルを変更

Question

今、私はaボタンの色を青に変えています...私はしたいと思いますが、私はとてもシンプルだと思っています。

現在のクラスを削除せずに別のクラスを実行したい、どうすればいいですか？

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: white; 
    } 

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

しかし、現在のCSSを削除せず：

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

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

私のようなものを追加したいですすでに存在するコード

Answer 1

CSSクラスを使用して、任意の要素から動的に追加または削除できる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/