Dom尺寸和位置

最新推荐文章于 2022-11-19 11:36:29 发布

~历桑

最新推荐文章于 2022-11-19 11:36:29 发布

阅读量365

点赞数

文章标签： css javascript vue.js

本文链接：https://blog.csdn.net/weixin_50053454/article/details/123189385

版权

1.clientWidth,clientHeight 网页的可视高度

2.offsetWidth,offsetHeight 网页的实际高度

3.scrollWidth,scrollHeight 网页占用的高度

<!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>尺寸位置</title>
    <style>
        /* html{
            height: 100px;
        } */
        body{
            border: 2px solid;
        }
        #div {
            /* line-height: 40px; */
        }
    </style>
</head>
<body>
    <div id="div">1234567</div>
    <script>
        // -------------------   关于位置 ------------
        var div = document.getElementById("div")
        div.style.margin = "20px";
        div.style.border = "10px solid"
        div.style.padding = "5px"
        document.body.style.position = "relative";


        // ---------------------  关于尺寸--------------------
        // 1, 关于屏幕尺寸
        console.log("screen",screen.width, screen.height)  // 屏幕尺寸
        console.log("screen",screen.availWidth, screen.availHeight) // 屏幕可用尺寸
        // 屏幕尺寸 - 屏幕可用尺寸 = 状态栏尺寸
    
        // 2, 关于窗口尺寸
        console.log("window",window.innerWidth, window.innerHeight) // 窗口内宽
        console.log("window",window.outerWidth, window.outerHeight) // 窗口外宽
        // 窗口外宽 - 窗口内宽 = 浏览器窗口边框宽度(不同浏览器边框不同)
        // 窗口外高 - 窗口内高 = 控制台高度 + 菜单栏高度
    
        // 3, 网页尺寸
        var html = document.documentElement;
        console.log("html", html.clientWidth, html.clientHeight) // 网页的可视高度
        console.log("html", html.offsetWidth, html.offsetHeight) // 网页实际高度
        console.log("html", html.scrollWidth, html.scrollHeight) // 网页占用的高度
        // 网页宽度 = 窗口内宽
        // 在网页没有滚动条时: `
        // window.innerHeight = html.clientHeight = html.scrollHeight > html.offsetHeight
        // 在网页有滚动条时:
        // window.innerHeight = html.clientHeight < html.scrollHeight = html.offsetHeight
    
        // 4, 标签尺寸 和 网页尺寸对应, 三个API都可以获取标签尺寸,而且都一样

        console.log("div", div.clientWidth, div.clientHeight) 
        console.log("div", div.offsetWidth, div.offsetHeight) 
        console.log("div", div.scrollWidth, div.scrollHeight) 



        

        // 1, 相对于非静态定位的父元素的坐标, 对应绝对定位坐标
        console.log(div.offsetLeft, div.offsetTop)

        // 2, 标签内容相对于标签自身左上角的坐标 = 标签的边框宽度
        console.log(div.clientLeft, div.clientTop)

        // 3, 如果标签设置了overflow:scroll溢出滚动, 获取标签内容的滚动距离, 一般给html标签设置
        console.log(div.scrollLeft, div.scrollTop, html.scrollTop)




    </script>
</body>
</html>

~历桑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom尺寸和位置

1.clientWidth,clientHeight 网页的可视高度2.offsetWidth,offsetHeight 网页的实际高度3.scrollWidth,scrollHeight 网页占用的高度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device..
复制链接

扫一扫