Можно ли «прослушать» значение CSS для элемента DOM и указать другому элементу DOM, чтобы он соответствовал ему?

Question

Я пытаюсь взломать модуль colorpicker в Drupal, чтобы, когда мой пользователь перетаскивал его, выбирая цвета, он видел, как цвета меняются на веб-сайте в режиме реального времени.виджета выбора в режиме реального времени.

Я хочу взломать js, чтобы цвет виджета выбора и определенный элемент DOM меняли цвета фона сразу.

Есть ли способЯ могу написать некоторый код, который «слушает» настройку background-color входа colorpicker, а затем меняет background-color на?

Вот код, в котором Drupal применяет настройки из виджета colorpicker для ввода:

Drupal.behaviors.colorpicker = function(context) {  
$("input.colorpicker_textfield:not(.colorpicker-processed)", context).each(function() {
var index = $('body').find('input.colorpicker_textfield').index($(this));
Drupal.colorpickers[index] = new Drupal.colorpicker($(this).addClass('colorpicker-processed'));
Drupal.colorpickers[index].init();
});

Что я могу добавить к этому, чтобы сказать ему «прослушать» цвет фона «input.colorpicker_textfield», а затем установить это значение на «body» в реальном времени при его изменении?

Answer 1

Попробуйте использовать change (), чтобы применить его к bg.

$("input").change( function () {
   //var below would obviously have to be correctly formatted.
   var newColor$(this).val();
   $(body).css({background-color: newColor});
});

Answer 2

Аналогично ответу Коула с некоторыми улучшениями (при условии, что «#» не включен в палитру цветов):

$('input.colorpicker_textfield').live('change', function() {
    var color = this.value;
    if(color.search((/^[A-Fa-f0-9]{6}/) != -1) {
        body.style.backgroundColor = '#'+this.value;
    }
});

• Используется более конкретный селектор
• использует «живой»метод обработки событий, гарантирующий, что обработчик будет присоединен к любым динамически создаваемым палитрам цветов
• Он не изменит цвет фона, если входные данные не являются шестнадцатеричными значениями
• Он использует атрибут стиля непосредственно вместоперенос в объект jQuery.