使用纯javascript获取元素的维度和位置

情况：我想获取元素的尺寸和位置

背景：我正在做一个纸牌游戏。卡片可以放在黑板上。我需要检查他们的目的地是否在黑板上。然后，我将存储它们相对于电路板尺寸和位置的位置。这将有助于在可能使用不同屏幕尺寸的一组不同客户机上重现电路板

当前样式：

电路板的尺寸、宽度和高度由以下内容定义：

width: 100%;
flex-grow:1;

它的容器具有以下属性：

display: flex;
flex-direction: column;

您应该注意，实际尺寸为[942.922x874]。我无法找到位置信息，我假设是因为默认的div position:static而不是position:absolute

我的尝试：

let board = document.getElementById("gameboard");
if (board) {
  console.log("style.height", board.style.height);
  console.log("style.width", board.style.width);
  console.log("offsetHeight", board.offsetHeight);
  console.log("offsetWidth", board.offsetWidth);
  console.log("getBoundingClientRect" , board.getBoundingClientRect());
}

请注意，输出尺寸与实际尺寸不同。 [1137920]而不是[942.922x874]。[1137920]实际上是整个身体的尺寸。而且无论我做什么来获得这个职位，它总是给我[0,0]

编辑-1

我们得出的结论是，这可能是一个时间问题。我需要确保检索维度和位置的代码在元素渲染后运行。因为我正在使用react，所以找到了此线程。基本上说，我需要连接到React的组件生命周期方法componentDidMount（），该方法在渲染完成后立即运行。您可以在下面看到我的实现。然而，即使有了这个实现，我似乎仍然得到了body容器的维度，而不是我正在访问的元素

import React, {PureComponent, PropTypes} from 'react';
// import Card from '../../Components/Card/index.js';
// import Collection from '../../Components/Collection/index.js';
import {List} from 'immutable';
import Indicator from '../../Components/Indicator/index.js';
import Counter from '../../Components/Counter/index.js';
import {connect} from 'react-redux';
import * as actionCreators from './../../action_creators.js';
import './styles.scss';

export default class Game extends PureComponent {
  componentDidMount() {
    let board = document.getElementById("gameboard");
    console.log("getBoundingClientRect" , board.getBoundingClientRect());
  }
  render() {
    let playersById = this.props.playersById;
    let collections = this.props.collections;
    let counters = this.props.counters;

    let indic_list = [];
    let coll_list = [];

    //Indicators
    playersById.forEach(function(value, key, map){
      indic_list.push(<p className="section-name">{playersById.get(key).get('name')+"'s Indicators"}</p>)
      playersById.get(key).get('indicators').forEach(function(value, key2, map){
          indic_list.push(<Indicator playerId={key} action={this.props.modIndicator} label={key2}>{value}</Indicator>)
      }, this);
    },this);

    //Collections
    collections.forEach(function(value, key, map) {
      coll_list.push(<span>{key}: {collections.get(key).get("content").size}</span>);
      collections.get(key).get("control").forEach(function(value, key, map){
          coll_list.push(<span>Control: {value}</span>);
      });
    });

    return (
        <div className="frame">
          <div className="left-col">
            {indic_list}
          </div>
          <div className="center-col">
            <span className="collections">
              {coll_list}
            </span>
            <div id="gameboard"></div>
          </div>
          <div className="right-col">
            <div className="counters">
              {counters.map(function(type){
                return <Counter label={type}>You should use the 
.offsetWidth
 and 
.offsetHeight
 properties.


Note they belong to the element, not .style.


var width = document.getElementById('foo').offsetWidth;

import React，{PureComponent，PropTypes}来自'React'；
//从“../../Components/Card/index.js”导入卡片；
//从“../../Components/Collection/index.js”导入集合；
从“不可变”导入{List}；
从“../../Components/Indicator/index.js”导入指标；
从“../../Components/Counter/index.js”导入计数器；
从'react redux'导入{connect}；
从“/../../action_creators.js”导入*作为actionCreators；
导入“./styles.scss”；
导出默认类游戏扩展PureComponent{
componentDidMount（）{
let board=document.getElementById（“gameboard”）；
log（“getBoundingClientRect”，board.getBoundingClientRect（））；
}
render（）{
让playersById=this.props.playersById；
让集合=this.props.collections；
让计数器=this.props.counters；
让indi_list=[]；
让coll_list=[]；
//指标
playersById.forEach（函数（值、键、映射）{
indic_list.push（
{playersById.get（key.get（'name'）+“'s Indicators”}
）
playersById.get（键）.get（'indicators'）.forEach（函数（值，键2，映射）{
indic_list.push（{value}）
}，这个）；
}，这个）；
//收藏
collections.forEach（函数（值、键、映射）{
coll_list.push（{key}:{collections.get（key.get（“content”）.size}）；
collections.get（key）.get（“control”）.forEach（函数（值、键、映射）{
coll_list.push（控件：{value}）；
});
});
返回(
{indi_list}
{coll_list}
{counters.map（函数（类型）{
return您应该使用
.offsetWidth
和
offsetHeight
属性

注意它们属于元素，而不是.style

正如我在最后一次编辑中所说的，这个问题的解决方案来自于这个线程。答案受到SmokeyHP的评论的影响，我试图在元素实际呈现之前访问属性。我需要确保之后访问属性以获得准确的信息。
如果你想让你的板成为一个offsetParent（这样它内部元素的位置相对于它而不是主体），您必须给它一个
位置：relative
，例如，如果在加载页面后在控制台中实时运行该代码会怎么样-您会得到不同的结果吗？如果我实时运行它，我会得到正确的输出。getBoundingClientRect ClientRect{顶部：46，右侧：1058.515625，底部：920，左侧：115.59375，宽度：942.921875…}可能是时间问题，它需要向下移动代码或从超时/事件句柄运行。这可能就是问题所在。我正在使用react呈现UI。您的回答让我找到了这个线程，我认为它可能能够解决我的问题。他们说它从容器中获取维度。我需要在它之后获取维度通过连接到componentDidMount进行渲染。我将对其进行测试并在此处发布结果。谢谢。OP已经在使用这些…？如果您阅读此处，您将看到它不仅仅是这样：由于此答案确实添加了任何内容，我建议您更新或删除它，否则您很可能会被否决