使用JS更改按鈕上的圖像

Question

這聽起來很簡單，但是有些困難。

我有一個執行各種代碼的按鈕，如下所示：

document.getElementById('frm_accountId').disabled = false;

很好，但是，自然地，這樣做的按鈕想要顯示一個鎖定圖標，並且在單擊該圖標后希望將其更改為未鎖定的圖標。

<button id="button_unlock" type="button" onClick="unlock(this)"><img src="<?=base_url();?>assets/images/icons/stock_lock.png"/></button>

所以我想改變的是

<img src="<?=base_url();?>assets/images/icons/stock_lock.png"/> 。

是否有可能將其分配給php變量並使用JS進行更改，我想不是，但這就是我想要做的。

謝謝

Answer 1

您可以獲取innerHTML並進行更改

document.getElementById("button_unlock").innerHTML ="<img src='unlock.jpg'/>" ;

但是最好將一個CSS類添加到您的按鈕並定義背景圖像。 然后，當單擊它時，將類更改為帶有其他圖像的類。

.lock {
    background-image: url(lock.jpg);
    }

.unlock {
    background-image: url(unlock.jpg);
    }


<button id="button_unlock" type="button" onClick="unlock(this);" class="lock"></button>

Answer 2

這是一個如何切換圖像的示例。 它使用data-locked屬性來維持其狀態，並使用對象文字來定義圖像路徑。 這種方法的優點是它可以與多個按鈕和圖像一起使用，每個代碼都將保持一個獨立的狀態，因為代碼相對於目標按鈕的子<img>起作用。

var images = {
    locked : '<?=base_url();?>assets/images/icons/stock_lock.png',
    unlocked : '<?=base_url();?>assets/images/icons/stock_unlock.png'
};

function toggleLocked(buttonElement)
{
    var locked = buttonElement.getAttribute("data-locked") == "1";

    locked = !locked;
    buttonElement.setAttribute("data-locked", locked ? "1" : "0");

    buttonElement.children[0].src = locked ? images.locked : images.unlocked;
}

HTML：

<button id="button_unlock" type="button" data-locked="1" onClick="toggleLocked(this)"><img src="<?=base_url();?>assets/images/icons/stock_lock.png"/></button>