<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue浏览器与body宽高获取</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<style>
body{border:10px solid red}
</style>
</head>
<body>
<div id="app">
<p>body宽度(不包括边线)：<span>{{count1}}</span></p>
<p>body高度(不包括边线)：<span>{{count2}}</span></p>
<p>body宽度(包括边线的宽)：<span>{{count1_1}}</span></p>
<p>body高度(包括边线的宽)：<span>{{count2_2}}</span></p>
<p>浏览器可视区域宽度：<span>{{count3}}</span></p>
<p>浏览器可视区域高度：<span>{{count4}}</span></p>
<p>屏幕分辨率的宽：<span>{{count5}}</span></p>
<p>屏幕分辨率的高：<span>{{count6}}</span></p>
<p>屏幕可用工作区宽度：<span>{{count7}}</span></p>
<p>屏幕可用工作区高度：<span>{{count8}}</span></p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
count1: document.body.clientWidth,
count2:document.body.clientHeight,
count1_1:document.body.offsetWidth,
count2_2:document.body.offsetHeight,
count3:document.documentElement.clientWidth,
count4:document.documentElement.clientHeight,
count5:window.screen.width,
count6:window.screen.height,
count7:window.screen.availWidth,
count8:window.screen.availHeight
},
methods:{
getScreenSize() {
window.onresize = () => {
this.count1 = document.body.clientWidth;
this.count2 = document.body.clientHeight;
this.count1_1 = document.body.offsetWidth;
this.count2_2 = document.body.offsetHeight;
this.count3 = document.documentElement.clientWidth;
this.count4 = document.documentElement.clientHeight;
this.count5 = window.screen.width;
this.count6 = window.screen.height;
this.count7 = window.screen.availWidth;
this.count8 = window.screen.availHeight;
};
},
},
mounted: function() {
this.getScreenSize();
},
})
</script>
</html>
04-21
1万+
1万+
02-28
382
382
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
