vue获取屏幕高度赋值给div与获取div本身的高度

最新推荐文章于 2023-10-17 15:08:30 发布

原创最新推荐文章于 2023-10-17 15:08:30 发布 · 3.1k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #elementui

经验分享同时被 2 个专栏收录

149 篇文章

订阅专栏

vue

136 篇文章

订阅专栏

本文介绍了如何使用JavaScript动态获取屏幕尺寸，并将其应用于div元素的高度设置。此外，还提供了通过class类名获取特定div高度的方法。

一、获取屏幕高度赋值给div

html：

<div id="industrySectorScroll" :style="{ height: screenHeight + 'px' }"></div>

js:

  export default {
    name: "industrySectorScroll",

    data() {
      return {
        screenWeight: 0, // 屏幕宽度
        screenHeight: 0, // 屏幕高度
   
      };
    },
    mounted() {
      this.screenWeight = document.documentElement.clientWidth;
      this.screenHeight = document.documentElement.clientHeight;
}

二、根据class类名获取div高度

html：

获取高度的div

<div class="canvasWrap>要填充内容才有高度,或者写死高度</div>

被赋值的div

<div id="industrySectorScroll" :style="{ height: screenHeight + 'px' }"></div>

js：

  export default {
    name: "industrySectorScroll",

    data() {
      return {
        screenWeight: 0, // 屏幕宽度
        screenHeight: 0, // 屏幕高度
   
      };
    },
    mounted() {
      this.screenWeight =  document.querySelector(`.canvasWrap`).clientWidth;
      this.screenHeight = document.querySelector(`.canvasWrap`).clientHeight;
}