能否“监听”DOM元素的CSS值，并告诉另一个DOM元素匹配它？

Question

我正在尝试入侵Drupal的颜色选择器模块，以便当用户拖动它选择颜色时，可以在网站上实时看到颜色变化。目前，颜色选择器的js可以实时更改选择器小部件的颜色。我想入侵js，以便选择器小部件和特定的DOM元素同时更改背景颜色。有没有办法编写一些代码来“监听”颜色选择器输入的背景颜色设置，并随后更改 的背景颜色？以下是Drupal应用颜色选择器小部件设置到其输入的代码：

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”？

- bflora2

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

- Cole

---

我尝试梳理一下代码：$("input").change( function () { //下面的变量显然必须正确格式化。 var newColor = $(this).val(); $("body").css({"background-color", newColor}); - bflora2

Answer 2

类似于Cole的回答，但加入了一些改进（假设颜色选择器不会包含'#'）：

$('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对象中。

- typeof