javascript - 使用复选框更改背景图像宽度？

Question

我有一个简单的 Chrome 扩展程序，可以将一些 html 注入(inject)游戏网页，让用户自定义网页的背景图片。它使用 setlocalstorage 存储图像的 URL，以便当他们返回游戏时自定义背景图像仍然存在。我已经包含了一些强制图像适合浏览器窗口宽度的 CSS。这可以满足大多数用户的要求，但也有一些用户要求我允许他们关闭宽度匹配功能。我想要做的是添加一个复选框以允许用户关闭宽度调整。

我在想某种“如果复选框被选中，则将此类应用到 body 标签”之类的事情，但我似乎无法弄清楚。

如果有人能告诉我如何实现这一点，我将不胜感激!

Answer 1

将 onchange 事件监听器附加到复选框，检查复选框元素的 'checked' 值并添加/删除类:

yourCheckboxElement.addEventListener('change', function(e){
    document.body.classList[this.checked ? "add" : "remove"]("someClass");
    /* save value of this.checked to localStorage here */
});

jsFiddle 示例:http://jsfiddle.net/8RC2m/1/