在備用點擊上切換2種顏色之間div的背景顏色

Question

我有一個ID為“盒子”的div。 其初始背景顏色設置為#ff7700 。 我想創建一個函數“function1（）”來執行以下操作：

• 首先單擊：將背景顏色更改為#ff0077
• 第二次單擊：將背景顏色更改回#ff7700
• 第三次單擊：將背景顏色更改為#ff0077
• 第四次單擊：將背景顏色更改回#ff7700 ，依此類推。

碼：

<style>
    #box{
    background-color: #ff7700;
    cursor: pointer;
}    
</style>

<div id="box" onClick="function1()" > Inner HTML</div>

我試着寫一個函數，但它不起作用。

<script>
    function function1(){
        var check = document.getElementById("box").style;
        check2=check.backgroundColor;
        if (check2 != "#ff0077"){
            check2="#ff7700";
            } else {
               check2="#ff0077";
            }
       }
</script>

請告知任何其他方法。 我想堅持使用核心JS而不是使用Jquery。

Answer 1

最好使用布爾值作為切換：

 var div = document.getElementById("box"), toggle = false; div.onclick = function() { toggle = !toggle; // invert toggle div.style.background = toggle? "#ff0077": "#ff7700"; // change background color depending on the value of toggle } div.style.background = "#ff7700"; // give the div an initial background 

 <div id="box">Inner HTML</div> 

Answer 2

我用jQuery做了一個簡單的例子。 我希望我有所幫助。

基本上我得到一個帶有“.myDiv”類的元素並向其添加一個click事件。 始終單擊元素“toggleClass（）”方法切換類。

 $(document).ready(function(){ $(".myDiv").bind("click", function(){ $(this).toggleClass("myClass"); }); }); 

 .myDiv{ padding: 1em; font-family: "Helvetica", sans-serif; line-height: 1.5em; background: #cccccc; } .myClass{ background: red; color: white; } 

 <div class="myDiv"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda facere, cumque aliquam quis aut, velit quidem, repellendus quo maiores saepe unde sed reprehenderit laborum? Eum laborum possimus quidem, ea non.</p> </div> <!--jQuery Libary--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 3

1. 刪除background-color: #ff7700; 來自css選擇器#box
2. 創建2個css類，比如A和B並相應地放置背景顏色
3. 獲取dom元素var domEl = document.getElementById("box"); 之后如果domEl.className==="A"則為其分配"B" ，否則分配"A"

Answer 4

.style屬性不返回十六進制顏色代碼。 您可以使用window.getComputedStyle()來獲取計算出的CSS屬性，將顏色設置為rgb()值

 <style> #box { background-color: #ff7700; cursor: pointer; } </style> <script> function function1() { if ( window.getComputedStyle(box).backgroundColor === "rgb(255, 119, 0)") { box.style.backgroundColor = "rgb(255, 0, 119)"; } else { box.style.backgroundColor = "rgb(255, 119, 0)"; } } onload = function() { const box = document.getElementById("box"); } </script> <div id="box" onClick="function1()"> Inner HTML</div> 

另請參閱每次單擊按鈕時，是否可以更改背景顏色並返回到原始javascript中的原始顏色？

Answer 5

您將使用getComputedStyle（）獲取元素的顏色，這將返回您的顏色為rgb()格式。 如果您需要將rgb()更改為hex在此帖子上了解更多信息 。

這是一個例子

 function function1(){ var check = document.getElementById("box"); var color = window.getComputedStyle(check, null).getPropertyValue('background-color'); if (color != "rgb(255, 119, 0)"){ check.style.backgroundColor = "rgb(255, 119, 0)"; } else { check.style.backgroundColor = "rgb(255, 255, 255)"; } } 

 #box{ background-color: #ff7700; cursor: pointer; } 

 <div id="box" onclick="function1()">Inner HTML</div> 

Answer 6

使用內聯js代碼我建議傳遞這個變量：current element。 這樣您就不需要選擇元素。

使用window.getComputedStyle並將值轉換為十六進制值，代碼為：

 function function1(ele) { var background = window.getComputedStyle(ele).backgroundColor; var hexColor = rgb2hex(background); if (hexColor != "#ff0077") { ele.style.backgroundColor = "#ff0077"; } else { ele.style.backgroundColor = "#ff7700"; } } function rgb2hex(rgb) { rgb = rgb.match(/^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?/i); return (rgb && rgb.length === 4) ? "#" + ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : ''; } 

 #box { background-color: #ff7700; cursor: pointer; } 

 <div id="box" onClick="function1(this)"> Inner HTML</div>