從js更改背景顏色

Question

我會通過onclick javascript函數設置元素的背景顏色。 我的代碼是：

function changeBg( el ) {
    if( $( el ).css( "background-color" ) === "rgb(255,255,0)" ) {
        $( el ).css( "background-color", "red" );
    }
    else {
        $( el ).css( "background-color", "rgb(255,255,0)" );
    }
}

此代碼適用於將默認背景顏色更改為黃色（rgb（255,255,0）），但它不能從黃色變為紅色。 始終跳過第一個條件

Answer 1

更好的方法是使用toggleClass()而不是與dom匹配的顏色值

 function changeBg(el) { $(el).toggleClass('red') } 

 .red { background-color: red; } button{ background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="changeBg(this)">change</button> 

Answer 2

嘗試這個：

 $(document).ready(function(){ $('button').click(function(){ $(this).toggleClass('redColor'); }) }) 

 button { background-color: yellow; } .redColor { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <button>Click Me!</button> 

Answer 3

嘗試這個

 $(document).ready(function() { $('.container').on('click',function(){ var el = ".container"; if ($(el).css("background-color") === "rgb(255, 255, 0)") { $(el).css("background-color", "red"); } else { $(el).css("background-color", "rgb(255, 255, 0)"); } }); }); 

 .container { background-color: rgb(255, 255, 0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> Test </div>