<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14_获取元素盒子的宽高</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
background-color: orange;
border: 10px solid red;
padding: 10px;
}
</style>
</head>
<body>
<!-- box.offsetWidth的例子 -->
<div class="box"></div>
<!-- box.style属性的例子 -->
<!-- <div class="box" style="width: 200px; padding: 10px; border: 10px solid red"></div> -->
<script>
var box = document.querySelector('.box');
console.log(box.style);
box.offsetWidth = 5; // '5px'
console.dir(box.offsetWidth);
// offsetWidth 和 offsetHeight 能够获取行内 内联 外联中的样式值, 不再像box.style中仅局限于行内
// 获取盒子的宽高 offsetWidth offsetHeight 返回值是 数字类型 , 没有长度单位
// offsetWidth = width + border-left-width + border-right-width + padding-left-width + padding-right-width
// offsetHeight = height + border-left-height + border-right-height + padding-left-height + padding-right-height
//
// offset...
// 可以得到任意样式表中的样式值, 且没有单位
// offsetWidth 包含 padding border width
// 只可读, 不可写
// 主要用来获取元素大小 和 位置
// style
// 只能获取行内样式表中的样式值, 且带有单位
// style.width 获得的是width, 不包含padding和border的值
// 可读 也可写(赋值)
// 如果想给元素改值 用style
</script>
</body>
</html>
04-08
401
401
11-29
318
318
07-24
255
255
09-13
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
