javascript - 如何设置 div 宽度等于 Javascript 变量？

Question

当用户一遍又一遍地按下按钮时，我试图让 div 展开。

    <script>
            heartClicks=10;
            function love(){
                heartClicks++;
            }
      </script>

如何设置 div 的宽度等于 heartClicks？

        <div id="luv"></div>

Answer 1

document.getElementById('luv').style.width = heartClicks + "px";

Answer 2

document.getElementById("luv").style.width = heartClicks + "px";

需要记住的是，每次单击时您都需要重置/重新应用样式，因此您可能希望将其粘贴在按钮单击功能中。

Answer 3

var heartClicksElement = document.querySelector("#luv");
heartClicks = heartClicksElement.style.width;

Answer 4

@aug 的答案非常适合标准 javascript（确保你有一个事件处理程序）。如果您想使用 jQuery（或者如果其他浏览此问题的人想使用 jQuery），请尝试以下操作：

var heartClicks=10;

$(function(){
    $('#expand').on("click",function(){
        heartClicks++;
        $('#luv').css({'width':heartClicks});
    });
});

试试这个工作小提琴。