JS/Vue动态获取浏览器高度

原文地址：https://www.jeremyjone.com/448/，转载请注明

动态获取浏览器大小，可以动态调整页面布局，让页面更加灵活。

JS获取浏览器高度：

var width=document.documentElement.clientWidth;
var height=document.documentElement.clientHeight;

原生JS动态获取浏览器大小改变使用onresize：

window.onresize = function(){alert(document.documentElement.clientHeight);
}

Vue组件中动态获取高度，使用如下方式

首先在data中声明height变量：

data() {return {height: `${document.documentElement.clientHeight}`,}
},

如果需要在初始化有一些操作，可以在created中实现：

created() {this.windowHeight(document.documentElement.clientHeight);
},

当组件挂载后，调用JS的onresize方法：

mounted() {const _this = this;window.onresize = () => {return (() => {// 可以在这里保存到浏览器中，也可以保存到其他地方// window.height = document.documentElement.clientHeight;// _this.height = window.height;_this.height = `${document.documentElement.clientHeight}`;})();};
},

在watch中监听高度变化，这里优化了监听间隔，使用setTimeout，每500ms监听一次，这样操作避免了浏览器大小在持续变化时，连续监听带来的卡顿现象：

watch: {height (val) {if(!this.timer) {this.height = valthis.timer = truelet _this = thissetTimeout(function () {_this.timer = false}, 500)}// 这里可以添加修改时的方法this.windowHeight(val);}
},

定义上面修改时具体的操作方法：

methods: {windowHeight： function (value) {// do something...}
},

这样就可以实现监听浏览器大小的改变。

JS/Vue动态获取浏览器高度相关推荐

Vue 动态获取元素高度
getTitleHeight() { this.$nextTick(function () { this.contentHeight = document.getElementsByClassName ...
编辑器js获取浏览器高度和宽度值(转)
js获取浏览器高度和宽度值网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docume ...
java中如何设置浏览器宽度_[Java教程]关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)_星空网...
关于JS中获取浏览器高度和宽度值的多种方法(多浏览器) 2017-08-07 0 三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 d ...
js如何动态获取object类型里的键值
想要在js里动态获取 Object里的键值以往获取的键值的方式: var obj = {"name1":"张三","name2":&quo ...
vue 动态设置组件高度_高度动态的Vue明星评分组件
vue 动态设置组件高度虚拟动态星级 (vue-dynamic-star-rating) A Highly Customizable, easy-to-use elegant stars ratin ...
vue mixins（vue3 hooks）动态获取div高度
之前转载过一篇文章: https://blog.csdn.net/qq_37167049/article/details/103084927 可以动态计算div 高度,但是比较繁琐的痛点是: 需要在每 ...
JS获取浏览器高度并赋值给类
JS获取浏览器宽高的兼容写法: var w = window.innerWidth || document.documentElement.clientWidth || document.body.c ...
js 获取浏览器高度和宽度值
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
不同浏览器JS获取浏览器高度和宽度
摘自:http://blog.csdn.net/lai_gb/archive/2009/07/04/4320956.aspx IE中: document.body.clientWidth ==> ...
Js操作DOM及获取浏览器高度以及宽度
在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. ...

JS/Vue动态获取浏览器高度

JS获取浏览器高度：

Vue组件中动态获取高度，使用如下方式

JS/Vue动态获取浏览器高度相关推荐

最新文章

热门文章