我创建了一个 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>最佳答案
1.) 为重置颜色的类创建 CSS 规则:
.colorreset {
color: inherit;
}
2.) 在您不希望受到影响的标签上使用此类，它们将继承标准颜色(通常是黑色，或者您在 html 的 CSS 规则中定义的颜色和正文)。
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>关于javascript - 如何更改 HTML 标签颜色，如 h1、h2、p 等，但保持某些 h1、h2 标签不变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45253696/