居中
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
评论区