Javascript 是否使用复选框更改背景图像宽度？

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

我在想“如果复选框被选中，那么将这个类应用于body标签”之类的事情，但我似乎无法理解

---

如果有人能告诉我如何做到这一点，我会非常感激

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

---

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

---

将宽度调整代码包装在css类中，如

宽度调整

。然后试着这样做：

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

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

---

将宽度调整代码包装在css类中，如

宽度调整

。然后试着这样做：

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

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

---

您请求JavaScript只是为了避免使用jQuery，请尝试以下方法：

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

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

---

希望它有帮助

您只请求了JavaScript，因此我将避免使用jQuery，请尝试以下方法：

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

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

---

希望它有帮助

您可以使用此脚本检查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 );

---

您可以使用此脚本检查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 );

---

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

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

---

jsidle示例：

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

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

---

jsFiddle示例：

在jsFiddle中看到您的代码也会很好。在jsFiddle.AWESOME中看到您的代码也会很好！这一个工作得很好，并且与我现有的代码很好地集成。我没有将颜色更改为蓝色，而是创建了一个类，设置：background size:auto！重要信息当用户离开页面时，有没有办法保持选中或未选中状态？当值更改时，使用localStorage存储“checked”的值。加载时还原它，如果存储值为true，则将类添加到正文中。我了解如何设置localStorage，并在它来自文本字段而不是复选框的状态时调用它：（您可以在localStorage中存储任何值。语法相同。

localStorage.setItem（'checkboxValue'，this.checked）

AWESOME！这一个工作得很好，并且与我现有的代码很好地集成。我没有将颜色更改为蓝色，而是创建了一个类，该类设置为：background size:auto！important当用户离开页面时，有没有办法保持选中或未选中状态？当值更改时，使用localStorage存储“checked”的值。加载时还原它，如果存储值为true，则将类添加到正文中。我了解如何设置localStorage，并在它来自文本字段而不是复选框的状态时调用它。：（您可以在localStorage中存储任何值。语法相同。

localStorage.setItem（'checkboxValue'，this.checked'））这可能有助于缓存。这可能有助于缓存。