侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

大小 位置

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 114 阅读 / 1,983 字
温馨提示:
本文最后更新于 2022-04-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
居中
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
0

评论区