Question

我是初学者编码员。它可能很简单，但我试图找到答案但没有成功。我的问题是为什么width对象的height和div属性返回undefined，而它们显然都是100px？

In this topic 解释了如何获取.offsetWidth属性。但据我所知，它与.width并非100％相同。

＆＃13;

window.onload = function() {

  var test = document.getElementById("test");
  test.addEventListener("click", select);


  function select(e) {
    var elementID = e.target.id;
    var element = document.getElementById(elementID);
    var width = element.width;
    console.log(element);
    console.log(width);
  }

}

＆＃13;

div#test {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: black;
}

＆＃13;

<div id="test"></div>

＆＃13;

我的回答

谢谢大家的回答。他们让我找到了我自己的简单解决方案，希望对我这样的初学者有所帮助。答案是：div DOM对象没有.width和.height属性，即使您在CSS中分配它们并且它们运行良好。为此，它分别有.style.width和.style.height。但是，即使您通过CSS分配它们，它们也不会出现在element.style中，直到您有目的地使用Java Script。因此，要首先通过JS获取width元素的height或div，请从CSS中删除这些属性。你不再需要它们了。然后通过width命令分配element.style.width，然后您可以随时使用element.style.width轻松获取它。

CSS

div {
    position: absolute;
    background-color: black;
}

的JavaScript

window.onload = function() {

    var test = document.getElementById("test");
    test.addEventListener("click", select);
    test.style.width = "100px";
    test.style.height = "100px";


    function select(e) {                                  
        var elementID = e.target.id;
        var element = document.getElementById(elementID);
        var width = element.style.width;
        console.log(element);
        console.log(width);
    }

}

Answer 1

使用offsetWidth和offsetHeight

var test = document.getElementById("test");
test.addEventListener("click", select);


function select(e) {
  var elementID = e.target.id;
  var element = document.getElementById(elementID);
  var offsetWidth = element.offsetWidth;

  var positionInfo = element.getBoundingClientRect();
  var height = positionInfo.height;
  var width = positionInfo.width;

  console.log('element', element);
  console.log('offsetWidth', offsetWidth);
  console.log('width', width);
  console.log('height', height);
}

div#test {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: black;
}

<!doctype html>
<html lang="en">

<head>
  <title>test</title>
  <meta charset="utf-8">
</head>

<body>

  <div id="test"></div>

</body>

</html>

Answer 2

我认为您需要clientWidth和clientHeight。

为什么div DOM对象没有height和width属性

2 个答案: