Изменить ширину фонового изображения с помощью флажка?

Question

У меня есть простое расширение Chrome, которое вводит некоторый html в веб-страницу игры, которая позволяет пользователю настраивать фоновое изображение веб-страницы. Он хранит URL-адрес изображения с помощью setlocalstorage, поэтому, когда они возвращаются в игру, пользовательское фоновое изображение все еще присутствует. Я включил CSS, который заставляет изображение соответствовать ширине окна браузера. Это удовлетворяет большинство пользователей, но есть несколько запросов, которые я попросил, чтобы они отключили функцию сопоставления ширины. Я хотел бы добавить флажок, чтобы пользователь мог отключить настройку ширины.

Я думаю что-то вроде «если флажок установлен, примените этот класс к тегу тела», но я не могу понять его.

Если кто-то может показать мне, как это сделать, я бы очень признателен!

Answer 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"); 

Answer 2

Wrap код регулировки ширины в классе CSS, как width-adjustment. Тогда попробуйте что-то вроде этого:

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

Answer 3

Вы запросили JavaScript только так я избежит JQuery, попробовать что-то вроде этого:

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

надеюсь, что это помогает

Answer 4

Вы можете использовать этот скрипт для проверки если чкбокс установлен или нет.

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

Answer 5

Приложите OnChange слушателя событий с флажком, который проверяет значение 'проверено' для CheckBox элемента и добавляет/удаляет класс:

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/