Can I “listen” to the CSS value for a DOM element and tell another DOM element to match it?

Question

I'm trying to hack the colorpicker module for Drupal, so when my user drags it around colors, he sees the color changes on the website in real time.

Colorpicker js is currently changing the color of the pickup widget in real time.

I want to hack js so that the color of the picker widget AND the specific DOM element immediately changes the background color.

Is there a way to write code that “listens” for the background color of the colorpicker input and then changes the background color?

Here is the code in which Drupal applies the settings from the colorpicker widget to its input:

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", "" ?

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

, ( , "#" 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", , colorpickers
• ,
• style , jQuery.