如何使用按钮更改网页上的字体颜色？

Question

我想知道是否有人可以告诉我，当人们单击按钮时如何更改网页的字体颜色。

我具有背景功能，但似乎不适用于文本。

到目前为止，这是我的代码：

<div class="dropdown">
<button onclick="toggleBackgroundDropdown()" 
class="dropdownButton">Background</button>
<div id="backgroundDropdown" class="backgroundDropdown">
<a class="colorbutton">Red</a>
<a class="colorbutton">Yellow</a>
<a class="colorbutton">Blue</a>
<a class="colorbutton">White</a>
</div>

<button onclick="toggleTextColorDropdown()" class="dropdownButton">Text 
Color</button>
<div id="textColorDropdown" class="textColorDropdown">
<a class="textcolorbutton">Red</a>
<a class="textcolorbutton">Yellow</a>
<a class="textcolorbutton">Blue</a>
<a class="textcolorbutton">White</a>
</div>

</div>

<script>
function toggleBackgroundDropdown() 
{   
document.getElementById("backgroundDropdown").classList.toggle("show");
}

function toggleTextColorDropdown() 
{   
document.getElementById("textColorDropdown").classList.toggle("show");
}

function changeColor()
{
var x = event.clientX; 
var y = event.clientY;
var elementMouseIsOver = document.elementFromPoint(x, y);

document.body.style.backgroundColor = elementMouseIsOver.text;
}

function changeTextColor()
{
var x = event.clientX; 
var y = event.clientY;
var elementMouseIsOver = document.elementFromPoint(x, y);

var a = document.getElementById('a');
a.style.color = elementMouseIsOver.text;
}

window.onload = function(event)
{
var colorbuttons = document.getElementsByClassName("colorbutton");
for (var i = 0; i < colorbuttons.length; i++) 
{   
    colorbuttons[i].addEventListener('click', changeColor, false);
}

var textcolorbuttons = document.getElementsByClassName("textColorButton");
for (var i = 0; i < textcolorbuttons.length; i++) 
{   
    textcolorbuttons[i].addEventListener('click', changeTextColor, false);
}
}

window.onclick = function(event)
{
if (event.target.className == "colorbutton")
{
    toggleBackgroundDropdown();
}
else if (event.target.className == "textcolorbutton")
{
    toggleTextColorDropdown();
}
}
</script>

Answer 1

为按钮指定唯一的ID，例如为该按钮的backgroundChange 。 然后使用以下代码

$("#backgroundChange").click(function(){
   if($(this).css('background-color')=='lightgrey')
         $(this).css('background-color', 'red');
   else {
         $(this).css('background-color', 'lightgrey);
   }
});

同样，您可以切换课程

$("#backgroundChange").click(function () {
        $(this).toggleClass('backgroundDropdown');
});

Answer 2

不需要jquery，这是两种方法：

1. 用diff颜色定义两个类名，调用函数以更改类onCLick
   <p onclick="function(event){event.target.className = your new class"></p>
2. 改变你的CSS样式
   <p onclick="function(event){event.target.style.backgroundColor = 'read'}"></p>

Answer 3

更好的方法是添加/更改元素的类（即主体）并通过CSS进行样式设置。 更灵活，更强大。

Answer 4

如果您尝试更改整个页面上的文本颜色，并且可以是任意颜色（可以使用其他人建议的类，但只能使用非常有限的选择集），例如，使用<input type=color> ，仅使用document.body.style.color = something会遇到一些麻烦。 除非您添加了color: inherit否则几乎所有地方都将color: inherit 。

一种更彻底的方法（尽管由于API设计而有些笨拙）是更改在样式表中应用颜色的规则，一个带有较大选择器的规则可以确保您影响想要的每个元素：

const theRuleIndex = // here's the hard part, find the correct rule
document.styleSheets[0].cssRules[theRuleIndex].style.color = yourColor