// offset系列
// console.log(box.offsetTop)
// // box.offsetTop 当前盒子的外边框到
// // 上层有定位的元素的内边框的偏移量;上层都没有定位的时候 找到的是body
// console.log(box.offsetHeight)
// // box.offsetHeight 盒子一共占有的高度 内容高+俩padding+俩border
// console.log(box.offsetWidth)
// // box.offsetHeight 盒子一共占有的宽度 内容高+俩padding+俩border
// console.log(box.offsetLeft)
// console.log(box.offsetParent) //上层有定位的元素
//client系列
// console.log(box.clientTop) // 盒子 上边框的高度
// console.log(box.clientHeight) // 盒子 内容+上下padding的高度
// console.log(box.clientWidth) // 盒子 内容+左右padding的高度
// console.log(box.clientLeft) // 盒子 左边框的高度
// console.log(document.body.clientWidth || document.documentElement.clientWidth); // 获取屏幕的宽度
// scroll 系列
console.log(box.scrollHeight);
// 没有内容溢出的时候 跟 clientHight一样 ; 有溢出的时候 是内容高度 + 上padding
console.log(box.scrollTop);
// 指的是页面滚过去的高度
console.log(box.scrollWidth);
console.log(box.scrollLeft);
// 以上13个属性 只有box.scrollTop box.scrollLeft 是可以修改的 其他的都是只读的
js中盒模型的13个属性
最新推荐文章于 2022-05-04 15:41:33 发布