1、偏移量

元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（不包含外边距）。通过下列4个属性可以获取元素的偏移量：

offsetHeight：

offsetWidth:

offsetLeft:元素的左外边框包含元素的左内边距的像素距离；

offsetTop:元素的上外边框至包含元素上内边距的像素距离。

其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。

2、客户区大小

元素的客户区大小，指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个:clientWidth和clientHeight。

其中，clientWidth属性是元素内容区宽度加上左右内边距宽度；clientHeight属性是元素内容区高度加上上下内边距高度。

clientWidth = padding + width；

clientHeight = padding + height；

客户区大小就是元素内部的空间大小，因此滚动条占用的空间不在内。要确定浏览器的视口大小，可以使用document.documentElement或document.body的clientWidth和clientHeight。

3、滚动大小

滚动大小指的是包含滚动内容的元素的大小。有些元素，即使没有执行任何代码也能添加滚动条；但另外一些元素，则需要通过CSS的overflow属性进行设置才能滚动。以下是4个与滚动大小相关的属性。

scrollHeight:在没有滚动条的情况下，元素内容的总高度

scrollWidth:在没有滚动条的情况下，元素内容的总宽度

scrollLeft:被隐藏在内容区域左侧的像素数

scrollTop:被隐藏在内容区域上方区域的像素数

scrollWidth和scrollHeight主要用于确定元素内容的实际大小。通常认为<html>元素是在web浏览器的视口中滚动的元素。因此，带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。

javascript 元素的大小的更多相关文章

  1. JavaScript的DOM操作获取元素的大小

    通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...

  2. JavaScript的DOM操作获取元素实际大小

    clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...

  3. javascript 设置元素滚动大小

    3. 滚动大小 最后要介绍的是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小. 有些元素(例如 元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通 ...

  4. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  5. Javascript 验证上传图片大小[客户端验证]

    需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上, ...

  6. 彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应

    rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就 ...

  7. JavaScript的DOM操作获取元素周边大小

    一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...

  8. 在HTML中使用JavaScript元素

    script属性<script async = async charset="utf-8" defer="defer" src="index.h ...

  9. JavaScript 控制字体大小设置

    在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来: function setFontSize (id,content,params){ va ...

随机推荐

  1. html5的离线存储问题集合

    HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中 ...

  2. ubuntu安装django

    sudo apt-get install python-django -y#django操作mysql数据库时还需要安装python-mysqldb驱动,当然mysql安装是必须的前提 sudo ap ...

  3. 传统保险企业基于 Dubbo 的微服务实践

    本文整理自中国人寿保险(海外)股份有限公司深圳中心技术总监家黄晓彬在 Dubbo 社区开发者日深圳站的现场分享. 中国人寿保险(海外)股份有限公司负责香港.澳门.新加坡和印尼的业务开发,和国内业务不同 ...

  4. poj 2288 Islands and Bridges——状压dp(哈密尔顿回路)

    题目:http://poj.org/problem?id=2288 不知为什么记忆化搜索就是WA得不得了! #include<iostream> #include<cstdio> ...

  5. linux下监测进程是否存在

    因为有的统计脚本需要执行很久,而有不能总去人工的检查进程是否在跑,所以就用shell脚本来循环监测进程是否存在 尝试了网上说的$?表示上一条命令返回值总是达不到预期的结果,后来直接改成用一个变量记录返 ...

  6. 学习笔记（2）---Matlab 图像处理相关函数命令大全

    Matlab 图像处理相关函数命令大全 一.通用函数: colorbar  显示彩色条 语法:colorbar \ colorbar('vert') \ colorbar('horiz') \ col ...

  7. 计算机网络 5.6-5.8 TCP/UDP

    来看看传输层的位置 要点: 传输层是为两个应用进程提供端到端的通信 传输层的复用和分用 传输层与应用层就是端口 (传输层的应用访问点 TSP) 传输层与网络层之间就是协议字段(网络层的 NTSP) 端 ...

  8. 笔记：投机和投资 F4NNIU

    笔记:投机和投资 F4NNIU 投机是零和交易. 投资是正和博弈. 投机看是短期,只关心当下. 投资是看的长期,更关注未来. 投机容易分散注意力. 投资更关心交易外的注意力. 投机像是看运气,运气有好 ...

  9. 下载安装APK(兼容Android7.0)

    我们使用手机的时候经常会看到应用程序提示升级,大部分应用内部都需要实现升级提醒和应用程序文件(APK文件)下载. 一般写法都差不多,比如在启动app的时候,通过api接口获得服务器最新的版本号,然后和 ...

  10. iOS 停止不必要的UI动效设计

    http://www.cocoachina.com/design/20151124/14400.html 前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有 ...