如何更改HTML標簽顏色（例如h1，h2，p等），但保持某些h1，h2標簽不變？

Question

我創建了一個javascript文件，該文件可以更改所有HTML標簽的顏色，

我添加到javascript文件。
例如，如果我將h1標簽添加到javascript文件中，則會更改所有h1標簽的顏色。

但是我想保持一些h1標簽不變。 有可能這樣做嗎？
我具有黑色漸變背景的圖像標題，這就是為什么如果更改所有h1標簽的顏色，則標題文本顏色將變得不可讀的原因。 我該如何解決這個問題？

我的Javascript文件

 $(document).ready(function(){ $('.blackButton').click(switchBalck); $('.indigoButton').click(switchIndigo); $('.greyButton').click(switchGrey); $('.redButton').click(switchRed); $('.bluegreyButton').click(switchBluegrey); $('.tealButton').click(switchTeal); $('.amberButton').click(switchAmber); $('.orangeButton').click(switchOrange); function switchBalck() { $('h1, h2, h3, h4, h5, a').attr('class', 'black'); } function switchIndigo() { $('h1, h2, h3, h4, h5, a').attr('class', 'indigo'); } function switchGrey() { $('h1, h2, h3, h4, h5, a').attr('class', 'grey'); } function switchRed() { $('h1, h2, h3, h4, h5, a').attr('class', 'red'); } function switchBluegrey() { $('h1, h2, h3, h4, h5, a').attr('class', 'bluegrey'); } function switchTeal() { $('h1, h2, h3, h4, h5, a').attr('class', 'teal'); } function switchAmber() { $('h1, h2, h3, h4, h5, a').attr('class', 'amber'); } function switchOrange() { $('h1, h2, h3, h4, h5, a').attr('class', 'orange'); } }) 

 h1.black, h2.black, h3.black, h4.black, h5.black, h6.black, a.black { color:#000000; } h1.indigo, h2.indigo, h3.indigo, h4.indigo, h5.indigo, h6.indigo, a.indigo { color:#3F51B5; } h1.grey, h2.grey, h3.grey, h4.grey, h5.grey, h6.grey, a.grey{ color:#9E9E9E; } h1.red, h2.red, h3.red, h4.red, h5.red, h6.red, a.red{ color:#E57373; } h1.bluegrey, h2.bluegrey, h3.bluegrey, h4.bluegrey, h5.bluegrey, h6.bluegrey, a.bluegrey{ color:#607D8B; } h1.teal, h2.teal, h3.teal, h4.teal, h5.teal, h6.teal, a.teal{ color:#009368; } h1.amber, h2.amber, h3.amber, h4.amber, h5.amber, h6.amber, a.amber{ color:#FFC107; } h1.orange, h2.orange, h3.orange, h4.orange, h5.orange, h6.orange, a.orange{ color:#FF9800; } .switcher { list-style: none; margin: 0; padding: 0; overflow: hidden; } .switcher li { float: left; width: 30px; height: 30px; margin: 0 15px 15px 0; border-radius: 30px; border: 3px solid black; } .blackButton { background: #000000; } .indigoButton { background: #3F51B5; } .greyButton { background: #9E9E9E; } .redButton { background: #E57373; } .bluegreyButton { background: #607D8B; } .tealButton { background: #009368; } .amberButton { background: #FFC107; } .orangeButton { background: #FF9800; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="switcher"> <li class="blackButton"></li> <li class="indigoButton"></li> <li class="greyButton"></li> <li class="redButton"></li> <li class="bluegreyButton"></li> <li class="tealButton"></li> <li class="amberButton"></li> <li class="orangeButton"></li> </ul> 

Answer 1

我建議您向該h1標簽（您不想受到影響）添加一個普通的類名（'notAffected'），然后使用jquery選擇器，如下所示：$（'h1：not（.notAffected），h2，h3，h4 ，h5，a'）。attr（'class'，'whatever'）;

Answer 2

為您要更改顏色的所有元素創建一個新類，並在該類上調用javascript。

對於H1，H3，您的代碼將類似於以下內容。 您可以對其他元素執行相同的操作

HTML

<h1 class="changeColor"> This H1 will change color </h1>
<h1> This H1 won't change color </h1>
<h3 class="changeColor"> This H3 will change color </h3>
<h3> This H3 won't change color </h3>

CSS

.amber{
  color:#FFC107;
 }

.changeColor{

  }

使用Javascript

function switchAmber() {
  $('.changeColor').addClass("amber");
}

$( document ).ready(function() {
  switchAmber();
 });

JSFiddle： https ：//jsfiddle.net/pa4cofeq/

Answer 3

1.）為重置顏色的類創建CSS規則：

.colorreset {
  color: inherit;
}

2.）在您不想受到影響的標簽上使用此類，它們將繼承標准顏色（通常為黑色，或者您在CSS規則中為html和body定義的顏色）。

3）在jQuery中以以下方式使用該類，以排除具有腳本影響的元素：

function switchOrange() {
      $('h1:not(.resetcolor), h2:not(.resetcolor), h3:not(.resetcolor), h4:not(.resetcolor), h5:not(.resetcolor), a:not(.resetcolor)').attr('class', 'orange');
    }

（其他功能/顏色相同）

此功能將排除所有具有.resetcolor類的標簽。

 $(document).ready(function(){ $('.blackButton').click(switchBalck); $('.indigoButton').click(switchIndigo); $('.greyButton').click(switchGrey); $('.redButton').click(switchRed); $('.bluegreyButton').click(switchBluegrey); $('.tealButton').click(switchTeal); $('.amberButton').click(switchAmber); $('.orangeButton').click(switchOrange); function switchBalck() { $('h1:not(.resetcolor), h2:not(.resetcolor), h3:not(.resetcolor), h4:not(.resetcolor), h5:not(.resetcolor), a:not(.resetcolor)').attr('class', 'black'); } function switchIndigo() { $('h1:not(.resetcolor), h2:not(.resetcolor), h3:not(.resetcolor), h4:not(.resetcolor), h5:not(.resetcolor), a:not(.resetcolor)').attr('class', 'indigo'); } function switchGrey() { $('h1:not(.resetcolor), h2:not(.resetcolor), h3:not(.resetcolor), h4:not(.resetcolor), h5:not(.resetcolor), a:not(.resetcolor)').attr('class', 'grey'); } function switchRed() { $('h1:not(.resetcolor), h2:not(.resetcolor), h3:not(.resetcolor), h4:not(.resetcolor), h5:not(.resetcolor), a:not(.resetcolor)').attr('class', 'red'); } function switchBluegrey() { $('h1:not(.resetcolor), h2:not(.resetcolor), h3:not(.resetcolor), h4:not(.resetcolor), h5:not(.resetcolor), a:not(.resetcolor)').attr('class', 'bluegrey'); } function switchTeal() { $('h1:not(.resetcolor), h2:not(.resetcolor), h3:not(.resetcolor), h4:not(.resetcolor), h5:not(.resetcolor), a:not(.resetcolor)').attr('class', 'teal'); } function switchAmber() { $('h1:not(.resetcolor), h2:not(.resetcolor), h3:not(.resetcolor), h4:not(.resetcolor), h5:not(.resetcolor), a:not(.resetcolor)').attr('class', 'amber'); } function switchOrange() { $('h1:not(.resetcolor), h2:not(.resetcolor), h3:not(.resetcolor), h4:not(.resetcolor), h5:not(.resetcolor), a:not(.resetcolor)').attr('class', 'orange'); } }) 

 h1.black, h2.black, h3.black, h4.black, h5.black, h6.black, a.black { color:#000000; } h1.indigo, h2.indigo, h3.indigo, h4.indigo, h5.indigo, h6.indigo, a.indigo { color:#3F51B5; } h1.grey, h2.grey, h3.grey, h4.grey, h5.grey, h6.grey, a.grey{ color:#9E9E9E; } h1.red, h2.red, h3.red, h4.red, h5.red, h6.red, a.red{ color:#E57373; } h1.bluegrey, h2.bluegrey, h3.bluegrey, h4.bluegrey, h5.bluegrey, h6.bluegrey, a.bluegrey{ color:#607D8B; } h1.teal, h2.teal, h3.teal, h4.teal, h5.teal, h6.teal, a.teal{ color:#009368; } h1.amber, h2.amber, h3.amber, h4.amber, h5.amber, h6.amber, a.amber{ color:#FFC107; } h1.orange, h2.orange, h3.orange, h4.orange, h5.orange, h6.orange, a.orange{ color:#FF9800; } .switcher { list-style: none; margin: 0; padding: 0; overflow: hidden; } .switcher li { float: left; width: 30px; height: 30px; margin: 0 15px 15px 0; border-radius: 30px; border: 3px solid black; } .blackButton { background: #000000; } .indigoButton { background: #3F51B5; } .greyButton { background: #9E9E9E; } .redButton { background: #E57373; } .bluegreyButton { background: #607D8B; } .tealButton { background: #009368; } .amberButton { background: #FFC107; } .orangeButton { background: #FF9800; } .resetcolor { background: inherit !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="switcher"> <li class="blackButton"></li> <li class="indigoButton"></li> <li class="greyButton"></li> <li class="redButton"></li> <li class="bluegreyButton"></li> <li class="tealButton"></li> <li class="amberButton"></li> <li class="orangeButton"></li> </ul> <h1>Test (click a button above to change bg color)</h1> <h1 class="resetcolor">Test no color</h1> <h2>Test H2</h2> <h2 class="resetcolor">Test H2 no color</h2>