如何使用javascript更改div的CSS

我使用jquery创建了div，之后创建了div，我想更改它的CSS。但是，更改不起作用。如何使用javascript更改div的CSS

这是我的HTML：

<form> 
     <input type="text" id="color" placeholder="color"><br> 
     <input type="text" id="height" placeholder="height"><br> 
     <input type="text" id="width" placeholder="width"><br> 
     <input type="button" id="make" value="Make"> 
    </form>

，这是jQuery的：

$(document).ready(function() { 
      $('#make').click(function() { 
       if (($('#color').val().length) == 0 || ($('#height').val().length) == 0 || ($('#width').val().length) == 0) { 
        alert('lol') 
       } else { 
        var color = $('#color').val(); 
        var height = $('#width').val(); 
        var width = $('#height').val(); 
        $('body').append('<div id="kast" style="background:'+color+'; width:'+width+'px; height:'+height+'px;"></div>') 
        $('#make').remove(); 
        $('form').append('<input type="button" id="change" value="Change">'); 

       } 
      }) 
      $('#change').click(function() { 

       var color = $('#color').val(); 
       var height = $('#width').val(); 
       var width = $('#height').val(); 
       $('#kast').css('background-color', color); 
      }) 
     })

我希望有人能帮助我:)

来源

2013-11-21 Brecht Schepens

页面加载时元素不在代码中。你首先必须输入颜色和尺寸。那么你可以点击make。在您创建div #kast后，出现按钮更改 –

'上'，你正在创建它尝试动态：on

$('body').on('click','#change',function() { 
     var color = $('#color').val(); 
     var height = $('#width').val(); 
     var width = $('#height').val(); 
     $('#kast').css('background-color', color); 
    })

来源

2013-11-21 12:18:43

谢谢！那工作:) –

有用的信息:) –

当你需要使用.on()动态元素

$('form').on('click', '#change', function() { 
    var color = $('#color').val(); 
    var height = $('#width').val(); 
    var width = $('#height').val(); 
    $('#kast').css('background-color', color); 
})

DEMO

来源

2013-11-21 12:19:09 Satpal

谢谢！那工作:) –

与事件委托更换click()：

$(document).on('click, '#change', function() { 
    ... 
});

来源

2013-11-21 12:19:29

在这种情况下，你不能只用作为 $('#change').click绑定一个

事件在您已经加载页面后创建的DOM对象上。你应该使用下面这些：

$(document).on('click', '#change', function() { 

      var color = $('#color').val(); 
      var height = $('#width').val(); 
      var width = $('#height').val(); 
      $('#kast').css('background-color', color); 

     });

来源

2013-11-21 12:43:47 user3017449

如何使用javascript更改div的CSS

回答

相关问题