chrome扩展弹出窗口中的图像交换

image swap in chrome extension popup

本文关键字：图像 交换 窗口 扩展 chrome      更新时间：2023-09-26

我在弹出窗口中有一个图像，我希望在单击时将其与另一个图像交换。我检查localStorage以了解是否应该显示"on"或"off"按钮。

popup.html：

<body>
<div>
<img id="onOffButton" src="img/on_button.png" onclick="onOff()" />
</div>
</body>

popup.js:

function onOff() {
    var onOffButton = document.getElementById("onOffButton");
    if (localStorage.ToneSet === "off") {
        onOffButton.src="img/on_button.png";
    } else {
        onOffButton.src="img/off_button.png";
    }
}

目前我的localStorage.ToneSet设置为"on"，所以我的图像应该从"on_button.png"切换到"off_button.pnng"，但它仍然显示on_buttn.png。你知道我做错了什么吗？谢谢

也许是这样的http://jsfiddle.net/EX2hj/1/

当我创建一个随机测试.html 时，我不知道这对我有用

<div id="onOffButton" style='width:200px;height:200px;border:1px solid' onclick='toggle()'> </div>
<script>
    function toggle(){
        alert("a");
        var onOffButton = document.getElementById("onOffButton");
        if (localStorage.ToneSet == "off") {
           onOffButton.style.background = "red";
           localStorage.ToneSet = "on";
        } else {
           onOffButton.style.background = "green";
           localStorage.ToneSet = "off";
        }
    }
    toggle();
</script>
相关文章：