可以“监听”一个DOM元素的CSS值并告诉另一个DOM元素匹配它吗？

Question

我正在尝试破解Drupal的colorpicker模块，这样当我的用户拖动它来选择颜色时，他就会实时看到网站上的颜色变化。

现在，颜色选择器的js会实时更改选择器小部件的颜色。

我想要修改js，以便选择器小部件的颜色和特定的DOM元素立即更改背景颜色。

有没有一种方法可以写一些代码来“侦听”colorpicker输入的背景颜色设置，然后更改的背景颜色？

以下是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

与Cole的答案类似，但有一些改进(假设colorpicker中没有包含'#‘)：

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

• 使用更具体的选择器，
• 使用'live‘事件处理方法，确保处理程序将附加到任何动态创建的样式上如果输入不是十六进制值，则不会更改背景颜色。
• 它直接使用样式属性，而不是包装在jQuery对象中。