JavaScript: getElementById 不是 return 按钮的宽度

Question

为什么警报 window 不在此处显示按钮的宽度？我浏览了类似的问题，但看起来我的问题太简单了，没有答案。

<!DOCTYPE html>
<html>
<body>

<button id="jock" onclick="myFunction()">Try it</button>

    <script>
    function myFunction() 
       {
       alert(document.getElementById("jock").style.width);
       }
    </script>

    </body>
    </html>

Answer 1

使用 offsetWidth 代替样式宽度。这将获得元素的真实宽度值。

<!DOCTYPE html>
<html>
<body>

  <button id="jock" onclick="myFunction()">Try it</button>

  <script>
    function myFunction() {
      alert(document.getElementById("jock").offsetWidth);
    }
  </script>

</body>
</html>

Answer 2

元素中没有声明样式属性。所以document.getElementById("jock").style.width可能不行，

但 getComputedStyle 可用于获取 window 中按钮的宽度。

function myFunction() {
  var elem1 = document.getElementById("jock")
  var style = window.getComputedStyle(elem1, null);
  console.log(style.width)
}

<button id="jock" onclick="myFunction()"> Try it
  </button>

JavaScript: getElementById 不是 return 按钮的宽度

JavaScript: getElementById does not return the width of a button

javascript

getelementsbyname