章节
问答
课签
笔记
评论
占位
占位

元素大小

我们总结下与HTML元素的样式息息相关的属性。

偏移量

元素的可见大小由宽度高度决定,其中还要包括内边距、滚动条、边宽大小(不包括外边距),通过下面四个属性可以获得。

offsetWidth、offsetHeigh、offsetLeft、offsetTop

offsetHeight/offsetWidth: 表述元素的外尺寸:
元素内容 + 内边距 + 边框(不包括外边距),给出元素在页面中占据的宽度和高度的总计。

注意:把元素的边框和滚动条计算在内。

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width;
offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width;

包含关系:
offsetLeft/offsetTop: 表示该元素的左上角(边框外边缘)与已定位的父容器(offsetParent对象)左上角的距离。
offsetParent元素是指元素最近的定位(relative,absolute)祖先元素,可递归上溯。

 

客户区域大小

clientWidth、clientHeight

clientWidth/clientHeight: 用于描述元素的内尺寸:元素内容 + 两边内边距。

clientWidth = width+padding(left、right)
clientHeight = height+padding(top、bottom)

 

滚动大小

scrollWidth、scrollHeight、scrollLeft、scrollTop

scrollHeight/scrollWidth: 元素内容的总高度或宽度

scrollLeft/scrollTop:是指元素滚动条位置,它们是可写的(被隐藏的内容区域左侧/上方的像素)

scrollHeight:是元素的padding加元素内容的高度。这个高度与滚动条无关,是内容的实际高度。

计算方式 :scrollHeight = topPadding + bottomPadding + 内容margix box的高度。

在浏览器中的区别在于:

IE6、IE7 认为scrollHeight 是网页内容实际高度,可以小于clientHeight。

FF、Chrome 认为scrollHeight 是网页内容高度,不过最小值是clientHeight。

浏览器窗口的滚动条位置:window对象的 pageXoffset 和 pageYoffset , IE 8及更早版本可以通过scrollLeft和scrollTop属性获得滚动条位置。

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?