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

嘗試用這個工作小提琴 。