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

我建议你将一个普通的类名（'notAffected'）添加到那个h1标签（你不想受到影响）并使用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。）在您不想受影响的标签上使用此类，它们将继承标准颜色（通常是黑色，或者您在html和body的CSS规则中定义的内容{1}}）。

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的标记。

＆＃13;

$(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');
	}
 })

＆＃13;

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

＆＃13;

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

＆＃13;

如何更改HTML标签颜色，如h1，h2，p等，但保持一些h1，h2标签不变？

3 个答案: