[英]How to change font colour on webpage with a button?
我想知道是否有人可以告訴我,當人們單擊按鈕時如何更改網頁的字體顏色。
我具有背景功能,但似乎不適用於文本。
到目前為止,這是我的代碼:
<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>
為按鈕指定唯一的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');
});
不需要jquery,這是兩種方法:
<p onclick="function(event){event.target.className = your new class"></p>
<p onclick="function(event){event.target.style.backgroundColor = 'read'}"></p>
更好的方法是添加/更改元素的類(即主體)並通過CSS進行樣式設置。 更靈活,更強大。
如果您嘗試更改整個頁面上的文本顏色,並且可以是任意顏色(可以使用其他人建議的類,但只能使用非常有限的選擇集),例如,使用<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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.