clientHeight获取屏幕可视化高度

简介: clientHeight获取屏幕可视化高度

此时你设置后会发现屏幕的高度出现滚动条


那是因为body有8个外边距 设置margin:0就可以解决


watch可以区监听data中的数据,只要data中的数据发生变化 就可以执行watch中的函数了


watch也可以区调用methods中的方法


 <style>
     #box{
      background: #000;
     }
     body{
      margin: 0;
     }
  </style>
<body>
  <div id="app">
     <div id="box" ref="fullheight">
     </div>
   </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    new Vue({
      el: '#app',
        data() {
          return {
             clientHeight:"",     
          };
        },
        mounted(){
          this.clientHeight=`${document.documentElement.clientHeight}`;//获取屏幕可视化的高度;
          // console.log(this.clientHeight);//798px
          window.onresize = function temp() { //屏幕大小发生改变触发 window.onresize
            this.clientHeight = `${document.documentElement.clientHeight}`;
            // console.log("sf",this.clientHeight)
          };
        },
        watch: {
          // 如果 `clientHeight` 它是data中的值发生改变,这个函数就会运行
          clientHeight: function () {
            this.changeFixed(this.clientHeight);//去调用methods中的函数
          }
        },
        methods:{
          changeFixed(clientHeight){                        //动态修改样式
            console.log(clientHeight);
            this.$refs.fullheight.style.height = clientHeight+'px';
          },
        }
    })
  </script>


 

相关文章
|
1月前
|
编解码
element-ui 表格滚动条(不同分辨率)自适应问题;
element-ui 表格滚动条(不同分辨率)自适应问题;
70 1
|
22天前
表格高度根据内容自适应的瀑布流
表格高度根据内容自适应的瀑布流
21 1
|
22天前
使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应
使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应
25 2
|
27天前
表格宽度和高度
表格宽度和高度。
19 1
uniapp轮播图高度随变和左右滑动也获取高度
uniapp轮播图高度随变和左右滑动也获取高度
|
1月前
原生表格纵向滚动条
原生表格纵向滚动条
|
10月前
|
数据可视化
获取页面的可视化高度和宽度
获取页面的可视化高度和宽度
31 0
|
前端开发 数据可视化
canvas可视化效果之内阴影效果
canvas可视化效果之内阴影效果
canvas可视化效果之内阴影效果

热门文章

最新文章