如何设置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});
    });
});

尝试使用此working fiddle。