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

标签 javascript html css

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

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

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

最佳答案

将 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/

关于javascript - 使用复选框更改背景图像宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16941910/

相关文章:

javascript - 使用 jquery 根据元素类型设置内容

javascript - 在 Twitter 的 Bootstrap 中禁用按钮的最佳方法

javascript - 使用相同表单名称进行 Jquery 验证

javascript - 为 <div> 中用逗号分隔的文本应用不同的 css

html - IE7 和 IE8 的 flash 视频回退不起作用

c# - 格式化 HTML 表格

c# - 将 CSS 标签名称存储在数据驱动菜单的数据库中……这是错误的吗?

javascript - jQuery 删除第二类

php - 如何显示带有动态 id 的 html 图像

c# - 传递数据并重定向到 .net 中的新页面