0

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

我在想某种“如果选中该框，则将此类应用于正文标签”之类的事情，但是，我似乎无法弄清楚。

如果有人能告诉我如何做到这一点，我将不胜感激！

4

5 回答 5

3

将 onchange 事件侦听器附加到复选框，检查复选框元素的“已选中”值并添加/删除类：

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/

于 2013-06-05T14:08:05.690 回答
1

标记复选框时更改css：

$("#new").click(function() {
    if (this.checked){
       $(this).closest('p').addClass('white');
    } else {
       $(this).closest('p').removeClass('white');
    } 
});

添加样式：

.white {
   color: white;
}

这可能对你有用，不是吗？

此外，

$(":checkbox").attr("autocomplete", "on");
于 2013-06-05T14:01:08.200 回答
0

您可以使用此脚本来检查 chkbox 是否被选中。

(function( $ ){
 $.fn.check = function( handler ) {
 if (handler) {
  this.each(function() {
    $(this).change(function() {
      if ($(this).attr('checked')) {
        handler.call(this); 
       $(this).closest('p').addClass('white');
      }
    });
  }); 
 } else {
  this.each(function() {
    $(this).attr('checked', true);
    $(this).change();
    $(this).closest('p').addClass('white');
  });
 }
};

 $.fn.uncheck = function( handler ) {
 if (handler) {
  this.each(function() {
    $(this).change(function() {
      if (!$(this).attr('checked')) {
        handler.call(this); 
       $(this).closest('p').removeClass('white');
      }
    });
  }); 
  } else {
  this.each(function() {
    $(this).attr('checked', false);
    $(this).change();
       $(this).closest('p').removeClass('white');
  });
  }
 };
})( jQuery );
于 2013-06-05T14:07:25.383 回答
0

将您的宽度调整代码包装在一个 css 类中，例如width-adjustment. 然后尝试这样的事情：

if ($('#IdOfYourCheckBox').is(":checked") == true){
    $("#ElementToChange").removeClass('width-adjustment');
}
于 2013-06-05T14:04:36.373 回答
0

你只请求了 JavaScript，所以我会避免使用 jQuery，试试这样的：

var b = document.getElementsByTagName("body")[0];
if (document.getElementById('checkbox-id').checked){
    b.className +=" yourclass";
}

希望能帮助到你

于 2013-06-05T14:05:42.543 回答