offest系列方法

最新推荐文章于 2024-07-05 17:37:30 发布

东方求败、

最新推荐文章于 2024-07-05 17:37:30 发布

阅读量594

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript复习之路 # javascript基础文章标签： html html5 javascript

本文链接：https://blog.youkuaiyun.com/wang_swa99er/article/details/120128535

javascript复习之路同时被 2 个专栏收录

87 篇文章

订阅专栏

javascript基础

77 篇文章

订阅专栏

本文介绍了JavaScript中的offsetWidth和offsetHeight属性，它们用于获取元素的实际宽度和高度，包括内边距、边框和外边距。同时，offsetLeft和offsetTop揭示了元素相对于其最近定位祖先元素的位置。通过示例代码展示了如何使用这些属性来获取元素尺寸和位置信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

offest系列方法

offsetWidth (height + padding + margin + border)
offsetHeight

offsetLeft 眼睛能看到实际距离第一个有定位的父节点的距离
offsetTop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 100px;height: 100px;background-color: black;border: 1px dashed red;padding: 20px;margin: 20px;}
    </style>
    <script src="tool.js"></script>
    <script>
       window.onload = function()
       {
           var oDiv = document.getElementById("div1");
           alert(getStyle(oDiv,"width")); //100px
           alert(oDiv.offsetWidth);// 142
       }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>