clientHeight获取屏幕可视化高度

最新推荐文章于 2022-09-03 09:50:57 发布

weixin_30301183

最新推荐文章于 2022-09-03 09:50:57 发布

阅读量470

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/IwishIcould/p/11571122.html

版权

此时你设置后会发现屏幕的高度出现滚动条
那是因为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>