javascript 使用Vuejs获取元素高度

zzwlnbp8 于 2022-12-25 发布在 Java

关注(0)|答案(5)|浏览(162)

我想得到一个div的高度，以使另一个div的高度匹配它。我使用了方法clientHeight，但它没有返回我的好值（较小的值）。实际上，它似乎返回一个高度之前，所有的元素都收费。经过一些网上研究，我试图把一个window. load（）延迟，直到所有的收费，但它不工作，以及。一些想法？

mounted () {
  this.matchHeight()
},
matchHeight () {
  let height = document.getElementById('info-box').clientHeight
}

<div class="columns">
  <div class="left-column" id="context">
  <p>Some text</p>
  </div>
  <div class="right-column" id="info-box">
    <img />
    <ul>
      some list
    </ul>
  </div>
</div>

JavaScript

来源：https://stackoverflow.com/questions/44948714/get-element-height-with-vuejs

5条答案

按热度按时间

jmo0nnb31#

你这样做是好的。但是还有另一种通过ref属性的vue特定方法。

mounted () {
   this.matchHeight()
 },
 matchHeight () {
   let height = this.$refs.infoBox.clientHeight;
 }

<div class="columns">
        <div class="left-column" id="context">
            <p>Some text</p>
        </div>
        <div class="right-column" id="info-box" ref="infoBox"></>
            <img />
            <ul>
                some list
            </ul>
        </div>
    </div>

在这种情况下，由于您只是获取值，因此使用原始的getElementById方法还是vue特定的ref方法并不重要。但是，如果您是在元素上设置值，则最好使用ref方法，以便vue了解值已更改并且不会"如果需要更新DOM中的节点，则不可能用原始值覆盖该值。
You can learn more here: https://v2.vuejs.org/v2/api/#vm-refs

- 更新**

有一些人留言说上面的解决方案不适合他们，这个解决方案提供了概念，但没有完整的代码作为例子，所以我用下面的代码来证明我的答案。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
下面是浏览器中结果的屏幕截图：

- 注：**

我的答案假设你是从cdn或者本地加载vue.js到浏览器并在那里执行，如果你是通过cli运行你的代码，而我的答案对你不起作用，请看@mayank1513的答案。

赞(0）回复(0）举报 2022-12-25

6ie5vjzr2#

花了很多时间解决这个问题。最初我试图通过Ron C来获得答案。试图获得this.$refs.infoBox.clientHeight;只是没有工作-它给出了未定义。
然后我探索了this.$refs.infoBox对象。
哇!!!我不知道他写的代码对他和其他人来说是如何工作的，但是没有任何属性叫做clientHeight。最后在$el里面找到了它。
因此我们需要将this.$refs.infoBox.clientHeight;替换为this.$refs.infoBox.$el.clientHeight;
这对我来说很有效。

更新

虽然使用nuxtthis.$refs.infoBox.$el.clientHeight;不起作用，但Ron C的答案适用于这种情况。this.$refs.infoBox.$el.clientHeight;似乎在使用@vue/cli时起作用

赞(0）回复(0）举报 2022-12-25

62lalag43#

我将使用flexbox来实现等高列https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
   display: flex;
}
.column {
   border: 1px solid;
   padding: 20px;
   width: 150px;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="container">
        <div class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac dui sed erat venenatis fermentum. Nulla tempus, magna
            sit amet ornare fringilla, ligula quam faucibus urna
        </div>
        <div class="column">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</body>
</html>

赞(0）回复(0）举报 2022-12-25

ffscu2ro4#

仅供参考-访问$el时也有问题（未定义）。使用vue/typescript -以下操作正常：

console.log('scriptPanel: mounted: sizes: ', (this.$refs.scriptSheet! as any).$el.clientHeight)

赞(0）回复(0）举报 2022-12-25

pod7payv5#

在我的案例中，它按照以下路径找到了clientHeight
此.$参考.信息框.$el.下一个元素同级.客户端高度

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 使用Vuejs获取元素高度

5条答案

更新

相关问题

热门标签

最新问答