[英]How to change the background color and text color with the click of a button in javascript?
我正在嘗試將三個不同的段落更改為遵循相同主題但不同的顏色(在示例中不明顯,只是測試)。 但我不能讓他們改變。 :(我也願意用JQuery方式做到這一點。
HTML
<button onclick="white()">
<p>White</p>
</button>
<button onclick="red()">
<p>Red</p>
</button>
<button onclick="yellow()">
<p>Yellow</p>
</button>
<button onclick="blue()">
<p>Blue</p>
</button>
<h1>Hey There</h1>
<ul class="list-unstyled">
<li>Colors are cool</li>
<li>Join the Rebellion!!!</li>
</ul>
<div class="colorbox" id="colorbox1">
<h1>Div one</h1>
<p>I'm 1</p>
</div>
<div class="colorbox" id="colorbox2">
<h1>Div two</h1>
<p>I'm 2</p>
</div>
<div class="colorbox" id="colorbox3">
<h1>Div three</h1>
<p>I'm 3</p>
</div>
JAVASCRIPT
var colorbox1 = document.getElementsById('colorbox1');
var colorbox2 = document.getElementsById('colorbox2');
var colorbox3 = document.getElementsById('colorbox3');
function white() {
colorbox1.style.backgroundColor = "white";
colorbox1.style.color = "black";
colorbox2.style.backgroundColor = "white";
colorbox2.style.color = "black";
colorbox3.style.backgroundColor = "white";
colorbox3.style.color = "black";
}
function red() {
colorbox1.style.backgroundColor = "red";
colorbox1.style.color = "black";
colorbox2.style.backgroundColor = "red";
colorbox2.style.color = "black";
colorbox3.style.backgroundColor = "red";
colorbox3.style.color = "black";
}
function yellow() {
colorbox1.style.backgroundColor = "yellow";
colorbox1.style.color = "black";
colorbox2.style.backgroundColor = "yellow";
colorbox2.style.color = "black";
colorbox3.style.backgroundColor = "yellow";
colorbox3.style.color = "black";
}
function blue() {
colorbox1.style.backgroundColor = "white";
colorbox1.style.color = "black";
colorbox2.style.backgroundColor = "white";
colorbox2.style.color = "black";
colorbox3.style.backgroundColor = "white";
colorbox3.style.color = "black";
}
沒有getElementsById()
方法,只有getElementById()
沒有s
var colorbox1 = document.getElementById('colorbox1');
var colorbox2 = document.getElementById('colorbox2');
var colorbox3 = document.getElementById('colorbox3');
JQUERY處理它的方法:首先我只有一個函數。 例如,只需在參數中給它顏色
onclick="changeColor('#3E6AA9')" //for blue
這是一個完整的代碼(沒有處理背景)
<button onclick="changeColor('#fff')">
<p>White</p>
</button>
<button onclick="changeColor('#D80000')">
<p>Red</p>
</button>
<button onclick="changeColor('#FBD505')">
<p>Yellow</p>
</button>
<button onclick="changeColor('#0086BE')">
<p>Blue</p>
</button>
<h1>Hey There</h1>
<ul class="list-unstyled">
<li>Colors are cool</li>
<li>Join the Rebellion!!!</li>
</ul>
<div class="colorbox" id="colorbox1">
<h1>Div one</h1>
<p>I'm 1</p>
</div>
<div class="colorbox" id="colorbox2">
<h1>Div two</h1>
<p>I'm 2</p>
</div>
<div class="colorbox" id="colorbox3">
<h1>Div three</h1>
<p>I'm 3</p>
</div>
<script>
function changeColor(color){
console.log(color);
$('.colorbox').css({'color': color});
}
</script>
檢查這個有效的FIDDLE
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.