获取元素宽高和距离定位父级的距离

获取元素宽/高和距离定位父级的距离获取元素宽高offsetWidth/offsetHeight获取元素的宽度和高度（包含边框和内边距）clientLeft/clientTop取元素左/上边框宽度clientWidth/clientHeight获取元素宽度（不包含边框）计算公式：offsetHeight = 元素高度+元素上内边距+元素下内边距+元素上边框+元素下边框offsetWidth = 元素

yuan溜溜

10441人浏览 · 2020-06-16 21:22:32

yuan溜溜 · 2020-06-16 21:22:32 发布

获取元素宽/高和距离定位父级的距离

获取元素宽高

offsetWidth/offsetHeight获取元素的宽度和高度（包含边框和内边距）

clientLeft/clientTop取元素左/上边框宽度

clientWidth/clientHeight获取元素宽度（不包含边框）

计算公式：

offsetHeight = 元素高度+元素上内边距+元素下内边距+元素上边框+元素下边框
offsetWidth = 元素宽度+元素左内边距+元素右内边距+元素左边框+元素右边框
clientLeft = 左边框宽度
clientTop = 上边框宽度
clientWidth = 元素高度+元素上内边距+元素下内边距
clientHeight= 元素宽度+元素左内边距+元素右内边距

<!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>
</head>
<style>
    body{
        margin: 0px;
    }
    .getInfo{
        width: 200px;
        height: 220px;
        background-color: #bae9d9;
        border: 4px solid pink;
        margin: 10px 0px 0px 10px;
        padding: 5px 10px;
    }
</style>
<body>
    <div class="getInfo"></div>
</body>
<script>
    let getInfo = document.getElementsByClassName('getInfo')[0]
   	// 228 = 200+10+10+4+4
    console.log(getInfo.offsetWidth)
    // 238 = 220+5+5+4+4
    console.log(getInfo.offsetHeight)
	// 4
    console.log(getInfo.clientLeft)
	// 4
    console.log(getInfo.clientTop)
	// 220 = 200+10+10
    console.log(getInfo.clientWidth )
	// 230 = 220+5+5
    console.log(getInfo.clientHeight)
</script>

距离定位父级的距离

offsetLeft /offsetTop距离定位父级的距离计算公式：

offsetLeft = 元素左外边距+父级元素的左内边距
offsetTop= 元素上外边距+父级元素的上内边距

<!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>
</head>
<style>
    body{
        margin: 0px;
    }
    .parent {
        position: relative;
        width: 500px;
        height: 500px;
        border: 1px solid;
        padding: 20px;
    }
    .getInfo{
        width: 200px;
        height: 220px;
        background-color: #bae9d9;
        border: 4px solid pink;
        margin: 10px 5px 8px 20px;
        padding: 5px 10px;
    }
</style>

<body>
   	<div class="parent">
    	<div class="getInfo"></div>
    </div>
</body>
<script>
    let getInfo = document.getElementsByClassName('getInfo')[0]
	// 40 = 20 + 20
    console.log(getInfo.offsetLeft )
	// 30 = 10 + 20
    console.log(getInfo.offsetTop )
</script>

获取可视区或者文档的宽高

window.innerWidth
window.innerHeight
document.body.clientWidth 
document.body.clientHeight

// 1382
console.log(window.innerWidth)
// 1041
console.log(window.innerHeight )
// 1382
console.log(document.body.clientWidth)
// 542
console.log(document.body.clientHeight)