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

Change background image width with checkbox?

本文关键字：图像 背景 复选框      更新时间：2023-09-26

我有一个简单的Chrome扩展，注入一些html到一个游戏网页，让用户自定义网页的背景图像。它使用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/

当复选框被标记时改变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");

将宽度调整代码包装在像width-adjustment这样的css类中。然后尝试这样做:

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

你只要求JavaScript，所以我将避免使用jQuery，尝试这样做:

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

希望有所帮助

您可以使用这个脚本来检查复选框是否被选中。

(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 );
相关文章：