0

我正在尝试根据输入值创建（或更新？）CSS。简而言之，我有一个从文本输入字段运行的颜色选择器。当输入值发生变化时（也就是颜色十六进制值），我需要background用这个值更新我页面上另一个元素上的 css。

我在做什么是行不通的。我究竟做错了什么？或者根据实时输入值更新/替换 CSS 的最佳方法是什么？

脚本：

    // Bar Background Color - Live Preview
    $('.bg_color').live("change", function() {

        var bg_color = $(this).val(); // grab color input value

        if ($(this).val().length > 0)
        {
            // replace css value on live preview 
            $('.campaignBar').css('background', bg_color);  
        } 
        else
        {
            //resorts back to default if no value entered
            $('.campaignBar').css('background', '#4575A1' });   
        }         

    });
4

2 回答 2

2

这对我有用

$(document).ready(function() {
  $('.bg_color').miniColors({
    change: function(hex, rgba) {    
      if (hex.length > 0)
      {
       // replace css value on live preview 
       $('.campaignBar').css('backgroundColor', hex);  
      } 
      else
      {
        //resorts back to default if no value entered
        $('.campaignBar').css('backgroundColor', '#4575A1');   
      }         
     }
   }); 
 });
于 2012-11-19T17:55:39.853 回答
0

JSFiddle

$('.bg_color').on("change", function() {
    var bg_color = $(this).val(); 
    if (bg_color.length > 2)
    {
        $('.campaignBar').css("background-color",'#'+bg_color);
    } 
    else
    {
        $('.campaignBar').css('background-color','#4575A1');   
    }         
});​

我已将其设置为大于 2，因为对于十六进制值，您需要有 3 个或更多数字才能将其识别为数字。

于 2012-11-19T17:59:32.063 回答