居中
oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";overflow: hidden;
一定要注意,如果算的刚刚好的话小心滚动条出来,那样就会小10个像素,格式就会乱.
window.onresize = function () {
self.computeSize()
}computeSize: function () {
let self = this;
self.style.treeDiv.height = $('body').height() - $("#play-div").height() - 160 + 'px';
$("#tree-div").height(self.style.treeDiv.height);
let width = $('body').width() - $('#device-tree').width();
let height = $('body').height() - 70;
console.log(width + ' ' + height);
width -= 20;
let scale = width / height;
console.log(scale)
switch (self.videoCount) {
case 1:
break;
case 2:
if (scale > 16 / 9) {
width /= 2;
} else {
height /= 2;
}
break;
case 4:
width /= 2;
height /= 2;
break;
case 6:
if (scale > 16 / 9) {
width /= 3;
height /= 2;
} else {
width /= 2;
height /= 3;
}
break;
case 9:
width /= 3;
height /= 3;
break;
}
self.videoHeight = height;
self.videoWidth = width;
},click事件触发后，可以取到 offsetX ，是距离元素左边框的位置。
二.文档对象
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
三.window对象
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight（顶部到任务栏上边）
屏幕可用工作区宽度： window.screen.availWidth
浏览器可视区域的内宽度： window.innerWidth;（不包含浏览器边框，但包含滚动条 ）
浏览器可视区域的内高度： window.innerHeight;
四.页面对象相关
1.物理空间
包含border,padding和滚动条宽度
页面元素高度 element.offsetHeight
页面元素宽度 element.offsetWeight
2.完整空间
容器大小，包含不可见部分，包含padding
容器总高 scrollHeight
容器总宽 scrollWeight
3.可视区域
包括内容和 padding，如果有滚动条，还需要减去滚动条的宽度
可视高度 clientHeight
可视宽度 clientWeight
4.完整坐标宽高对象
element.getBoundingClientRect()
返回元素的宽高以及基于页面上下左右的距离
eg.
DOMRect {
bottom:-1902.25
height:182
left:350
right:575
top:-2084.25
width:225
x:350
y:-2084.25
}作者：StevenDIY
来源：CSDN
原文：https://blog.csdn.net/momdiy/article/details/82670961
评论区