Document元素边框形状相关属性

最新推荐文章于 2022-05-13 15:48:30 发布

yedegesong

最新推荐文章于 2022-05-13 15:48:30 发布

阅读量347

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixiaoderensheng/article/details/83269294

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

clientWidth //宽度(content+paddingLeft+paddingRight)
clientHeight //长度(content+paddingTop+paddingBottom)
offsetWidth //宽度(content+padding+borderLeft+borderRight)
offsetHeight //长度(content+padding+borderTop+borderBottom)
offsetTop //marginTop如果dom位于position:relative;获取对象相对于由offsetParent属性指定的父坐标
offsetLeft //marginLeft
clientTop //上border边框
clientLeft //左border边框
scrollWidth //dom.scrollWidth
scrollHeight //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>Document</title>
    <style>
        #content{
            width:100px;
            height:150px;
            background-color:red;
            padding-top:10px;
            padding-right:20px;
            padding-bottom:30px;
            padding-left:40px;
            margin:20px;
            border:5px solid yellow;
            overflow: auto;
        }
         p{
            width:500px;
            height:500px;
            background-color:#000;
        } 
    </style>
</head>
<body>
    <div style="padding:50px;">
            <div id="content">
                    <span id="My_P"></span>
                    <span id="span">【消息称Facebook公司营收创新高】外电报道，据消息人士透露，社交网站Facebook2011年上半年营收为16亿美元，净利润达5亿美元。其中，16亿美元的营收入不近创下公司营收新高，也使得这家世界上最大的社交网络公司的营收入同比增加了近一倍。 </span>
                </div>
    </div>
   
    <script>
        var dom = document.getElementById("content")
        console.log(`宽度(content+padding):${dom.clientWidth}`)
        console.log(`长度(content+padding):${dom.clientHeight}`)
        console.log(`宽度(content+padding+borderLeft+borderRight):${dom.offsetWidth}`)
        console.log(`长度(content+padding+borderTop+borderBottom):${dom.offsetHeight}`)
        console.log(`marginTop:${dom.offsetTop}`)
        console.log(`marginLeft:${dom.offsetLeft}`)
        console.log(`上border边框:${dom.clientTop}`)
        console.log(`左border边框:${dom.clientLeft}`)
        console.log(`滚动条的宽度+borderLeft${dom.scrollWidth}`)
        console.log(`滚动条的宽度+borderTop${dom.scrollHeight}`)
        dom.addEventListener("scroll",function(e){
            console.log(e)
            console.log(dom.scrollTop)
        })
        //方法返回元素的大小及其相对于视口的位置
        console.log(dom.getBoundingClientRect()) //78
        console.log(document.getElementById("span").getClientRects())
    </script>
</body>
</html>