获取元素实际占位的宽高 js 230215

时间：2023-02-16 07:20:26

属性

offsetWidth

offsetHeight

用于获取元素的实占大小

包括了内容，填充，边框 


示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            /*position: relative;*/
            margin-top: 50px;
            background-color: gold;
            left: 100px;
            top: 30px;
        }

        .in {
            width: 50px;
            height: 50px;
            border: 2px solid blue;
            background-color: red;
            position: absolute;
            left: 20px;
            top: 30px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="in"></div>
</div>
<script>
    var eleIn = document.querySelector(".in")
    console.log(eleIn.offsetWidth)
    console.log(eleIn.offsetHeight)
</script>
</body>
</html>
标签：

相关文章