主页 / 问题 / 731446
Accepted
Jarry Roxwell
Asked:2020-10-16 17:58:39 +0800 CST2020-10-16 17:58:39 +0800 CST

getBoundingClientRect() JS 的歧义

  • 772

你好。在 getBoundingClientRect() 中遇到歧义。即：如果代码中有divc id ，则输出244到控制台，但如果您在控制台中输入，则显示122，即正确的控制台值。这是怎么回事？c1console.log(c1.getBoundingClientRect().x);c1.getBoundingClientRect().x

窗口边缘的边距

alert(c1.getBoundingClientRect().x);

安慰

console.log(c1.getBoundingClientRect().x)
.sector{
  display: flex;
  flex-direction:row;  
  min-width: 100px;
}
.spring{
  position: relative;
  display: block;
  width: calc((100vw - 100vh) / 2);
  background-color: green;
}
.q1{
  background-color: blue;
}
.content{
  min-width: 30px;
  max-width: 100px;
  overflow: hidden;
  background-color: yellow;
}
#c1{
  height:30px;
  width:30px;
  background-color:red;
}
 <div class="sector">
<div class="spring"></div>
  <div class="content">
    <div id="c1"></div>
  </div>
<div class="spring q1"></div>
 </div>

javascript

1 个回答

  1. Best Answer

    问题是，当您打开控制台时，窗口的大小会发生变化，元素也会发生变化。因此，控制台关闭时，值为 244，控制台打开时，值为 122。

    过去了<script>，<body>到处都变成了122

    这意味着在脚本之后连接了一些样式，或者由另一个脚本分配给该元素。因此，在第一次计算时，它们还没有被应用，当从控制台手动检查时，它们已经被应用了。

    • 2

相关问题