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

目 录CONTENT

文章目录

大小 位置

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

评论区