<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
margin: 100px;
background-color: pink;
border: 10px solid #000;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
//-------------------offsetWidth和offsetHeight-------------------
var div = document.getElementsByTagName("div")[0];
//offsetHeight和offsetWidth: 可以检测盒子的宽高。
//包括宽高本身，padding，border。不包括margin
//offsetHeight = height+padding+border;(不加margin)
//offsetWidth = width+padding+border;(不加margin)
console.log(div.offsetHeight);
console.log(typeof div.offsetHeight); //number
//------------------offsetLeft和offsetTop-----------------------
// offsetLeft和style.left区别
//
// 一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
// 而 style.left不可以
// 二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
// 三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
// 四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
//
// style.left在=的左边和右边还不一样。（左边的时候是属性，右边的时候是值）
//方便理解
//最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
//如果父系盒子中都没有定位，以body为准。
//style.left只能获取行内式，如果没有返回“”;
// 二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
//div.offsetLeft = 100; div.style.left = "100px";
// 三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
//style.left和style.top可以赋值
//offsetLeft和offsetTop只能获取值
// 四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
//style.left只能获取行内式，如果没有返回“”;
</script>
</body>
</html>
03-17
861
861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
