element 节点属性

clientHeight: 当前视图可视区域(content)的高度,不包括border
clientWidth:当前视图可视区域的宽度,不包括滚动条和border
clientLeft: 左边边框的宽度
clientTop:上边边框的高度


58f5b2fa00012ea604110247.jpg

element.getBoundingClientRect(): 返回一组数据,除了其中的width、height,其余数据是该节点相对于视口左上角的位置


image.png

scrollHeight: 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度,不包括border和margin
scrollWidth: 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小宽度,不包括border和margin
scrollTop:可以获取或设置垂直滚动到顶部的像素值
scrollLeft: 可以获取或设置滚动到左侧的像素值

offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素
offsetWidth属性可以返回对象的padding+border+width属性值之和
offsetTop和offsetLeft 获取距离offsetParent(父级中离得最近的table、table cell 或者html跟元素)的上、左距离

只在window下的属性,窗口宽高
window.innerHeight和innerWidth 返回窗口的文档显示区域的高度和宽度
window.outerHeight和outerWidth 获取加上工具条和滚动条的窗口高度和宽度

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,547评论 0 6
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 6,940评论 0 7
  • Element对象对应网页的HTML标签元素。每一个HTML标签元素,在DOM树上都会转化成一个Element节点...
    许先生__阅读 5,843评论 0 2
  • 第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...
    fastwe阅读 5,454评论 0 0
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,734评论 0 0