Question

我有这个HTML代码

<input id="red" type="text" value="120">
<div id="blue"></div>

和css

#blue{
margin-left: 120px
}

目的是当输入发生变化时，margin-left的值会发生变化。

我想要像下面这样做，但是有些东西不起作用：

(function ($) {
     $(document).ready(function () {
         $('#red').keyup(function () {
             var newMarginLeft = $('#red').val();
             $("#blue").css("margin-left",newMarginLeft);
         });
 }(jQuery));

Answer 1

你的jQuery有一些语法问题。以下是修订后的代码：

(function ($) {
    $(document).ready(function () {
        $('#red').keyup(function (e) {
            var newMarginLeft = $('#red').val();
            $("#blue").css("margin-left", newMarginLeft+"px");
        });
   })
})(jQuery);

要非常清楚你的牙箍和圆括号。您从未关闭.ready()函数，并且在绑定jQuery后有一个额外的括号。
您必须在CSS分配（px）中包含单位

JSFiddle

Answer 2

首先：围绕输入值的报价：

<input id="red" type="text" value="120">

第二：CSS应该像

margin-left：120px;

第三：在你的jquery中，DOM ready应该是：

(function($) {
   //
})(jQuery);

第四：在操纵css时添加单位。

Answer 3

你必须写

#blue{
margin-left: 120px
}

并在输入标记

中写id = "red"

Answer 4

这是一个javascript解决方案：

window.onload = function() {
var a = document.getElementById('red');
a.addEventListener('keyup',function(){
document.getElementById('blue').style.marginLeft = document.getElementById('red').value+"px";
});
}

DEMO

输入值必须改变css

4 个答案:

JSFiddle