javascript - 如何使用 jQuery/JavaScript 通过用户输入更改 <div> 的宽度？

Question

所以，这是我的问题: 我有一个 div:

<div id="square"></div>

还有一个输入:

<input type="number" id="width">

这是我的脚本:

var x;
        $("button").click(function(){
            x = $("#width").val();
            $("#square").attr("width", x);
        }

我想要做的是，当用户在输入中输入数字，然后单击按钮时，div 的宽度将设置为输入中的数字。 谢谢! 附:抱歉英语不好。

Answer 1

您可以尝试此代码

var x;
        $("#button").click(function(){
            x = $("#width").val();
            $("#square").css("width", x);
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="square" style="border:1px solid;width:10px;;height:10px"></div>
<input type="number" id="width">
<button type="button" id="button">Click</button>