[英]Toggle button color on click
在這里,我編寫了一個JavaScript
,可以在單擊一次按鈕時將按鈕的顏色更改為綠色,而當我再次單擊按鈕時,其顏色應重新更改為橙色。 按鈕的默認顏色是橙色。 我給了顏色的rgb
值。 但是,當我單擊該按鈕時,其顏色從橙色變為綠色,而再次單擊時,其顏色仍為綠色,而不會變回橙色。 請幫助我解決此問題。
<script>
function colorchange(id)
{
var background = document.getElementById(id).style.background;
if(background = "rgb(255,145,0)")
{
document.getElementById(id).style.background = "rgb(26,255,0)";
}
if(background == "rgb(26,255,0)")
{
document.getElementById(id).style.background = "rgb(255,145,0)";
}
}
</script>
這是輸入按鈕的HTML代碼
<input type="button" name="Ignore Select" value="Ignore Select" id="select" onclick="colorchange('select')" style="background:rgb(255,145,0);"/>
<input type="button" name="Ignore Delete" value="Ignore Delete" id="select1" onclick="colorchange('select1');" style="background:rgb(255,145,0);"/>
<input type="button" name="Ignore Insert" value="Ignore Insert" id="select2" onclick="colorchange('select2');" style="background:rgb(255,145,0);"/>
<input type="button" name="Ignore Update" value="Ignore Update" id="select3" onclick="colorchange('select3');" style="background:rgb(255,145,0);"/>
<input type="button" name="Ignore Sleep" value="Ignore Sleep" id="select4" onclick="colorchange('select4');" style="background:rgb(255,145,0);"/>
應該是if(background == "rgb(255,145,0)")
使用比較運算符==
代替賦值=
function colorchange(id) {
var background = document.getElementById(id).style.backgroundColor;
if (background == "rgb(255, 145, 0)") {
document.getElementById(id).style.background = "rgb(26,255,0)";
} else {
document.getElementById(id).style.background = "rgb(255,145,0)";
}
}
演示: 小提琴
由於使用了jQuery標簽
<input type="button" name="Ignore Select" value="Ignore Select" id="select" class="select" />
<input type="button" name="Ignore Delete" value="Ignore Delete" id="select1" class="select" />
<input type="button" name="Ignore Insert" value="Ignore Insert" id="select2" class="select" />
<input type="button" name="Ignore Update" value="Ignore Update" id="select3" class="select" />
<input type="button" name="Ignore Sleep" value="Ignore Sleep" id="select4" class="select" />
然后
.select {
background:rgb(255,145,0);
}
.select.highlight {
background:rgb(26, 255, 0);
}
和
jQuery(function ($) {
$('.select').click(function () {
$(this).toggleClass('highlight')
})
})
演示: 小提琴
jQuery:
$(":button").on('click', function () {
var gValue = $(this).attr('class');
if (gValue == 'orange') {
$(this).removeClass("orange");
$(this).addClass("red");
} else {
$(this).removeClass("red");
$(this).addClass("orange");
}
});
CSS:
.red {
background-color:red;
}
.orange {
background-color:orange;
}
您應該comparison
而不是assignment
運算符
if(background = "rgb(255,145,0)")
至
if(background == "rgb(255,145,0)")
//
<script>
function colorchange(id)
{
var background = document.getElementById(id).style.backgroundColor;
if(background == "rgb(255, 145, 0)")
{
document.getElementById(id).style.backgroundColor = "rgb(26,255,0)";
}
if(background == "rgb(26, 255, 0)")
{
document.getElementById(id).style.backgroundColor = "rgb(255,145,0)";
}
}
</script>
為什么不使用CSS作為背景色? http://jsfiddle.net/
HTML:
<input type="button" name="Ignore Select" value="Ignore Select" id="select" onclick="colorchange('select')" class="classA" />
<script>
function colorchange(id)
{
var el = document.getElementById(id);
var currentClass = el.getAttribute("class");
if(currentClass == 'classA')
{
el.setAttribute("class", "classB");
} else {
el.setAttribute("class", "classA");
}
}
</script>
CSS:
.classA {
background:rgb(255,145,0);
}
.classB {
background:rgb(26,255,0);
}
我會這樣寫:
btn是您的按鈕
var background = document.getElementById(id).style.background;
var btn = addEventListener("click", function (){
if(background = "rgb(255,145,0)"){
document.getElementById(id).style.background = "rgb(26,255,0)";
}
else
{
document.getElementById(id).style.background = "rgb(255,145,0)";
}
});
我的方法:
var eButton = document.querySelectorAll("button");
var isPink = false;//using white and pink in this example
eButton.addEventListener("click", function(){
if(isPink){
document.body.style.background = "white";
}
else{
document.body.style.background = "pink";
}
isPink = !isPink; //switches between true and false
});
要么
為背景編寫CSS並使用classList屬性
.pink{
background : pink;
}
JS
eButton.addEventListener("click", function(){
document.body.classList.toggle("pink");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.