Question

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

我正在考虑某种“如果选中这个盒子将这个类应用于body标签”，但是，我似乎无法弄明白。

如果有人能告诉我如何做到这一点，我真的很感激！

Answer 1

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

Answer 2

选中复选框时更改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");

Answer 3

将宽度调整代码包裹在width-adjustment等css类中。然后尝试这样的事情：

if ($('#IdOfYourCheckBox').is(":checked") == true){
    $("#ElementToChange").removeClass('width-adjustment');
}

Answer 4

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

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

希望有所帮助

Answer 5

您可以使用此脚本检查是否选中了复选框。

(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 );

用复选框更改背景图片宽度？

5 个答案: