如何使用按鈕更改網頁上的字體顏色？

我在想，如果有人能告訴我怎樣可以改變我的網頁上我的字體顏色當用戶點擊一個按鈕。如何使用按鈕更改網頁上的字體顏色？

我有後臺的功能，但它似乎沒有爲文本。

這裏是我到目前爲止的代碼：

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

來源

2017-03-20 Peter L

你嘗試過這麼遠嗎？ – funcoding

發佈您的toggleTextColorDropdown（）函數。 –

給出一個唯一的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'); 
});

來源

2017-03-20 18:16:06

沒有必要的jquery，雙向做到這一點：

定義與差異的顏色的兩種類名，通話功能改變類CLCLK
<p onclick="function(event){event.target.className = your new class"></p>
改變你的css風格
<p onclick="function(event){event.target.style.backgroundColor = 'read'}"></p>

來源

2017-03-20 18:24:02

更好的方法是添加/更改元素的類，即i。即身體並通過CSS進行造型。更靈活，更強大。

來源

2017-03-20 18:35:05 Mary

如果你正在試圖改變整個頁面上的文本顏色，也可以是任意顏色（你可以使用類別人的建議，但是隻有一組非常有限的選擇），例如與採摘它一個<input type=color>，你必須只使用document.body.style.color = something一些麻煩。除非你幾乎在任何地方都添加了color: inherit。

更徹底的（雖然有點笨重，由於API設計）的做法是改變在樣式表應用顏色規則，有一個大選擇一個規則可以確保你的影響，你想每一個元素：

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

來源

2017-03-20 18:42:18 Touffy

如何使用按鈕更改網頁上的字體顏色？

回答

相關問題