样例:

<div id="div" style="height: 200px;width: 200px;border:solid 50px red;overflow:auto;padding:50px">
<div id="info" style="height:400px;width:400px;border:solid 1px blue;"></div>
<script>
var div=document.getElementById("div");
var ho=div.offsetHeight;
var hc=div.clientHeight;
console.log(ho,hc);
</script>
</div>

1.offsetWidth

offsetWidth=border+padding+height;

这里等于: 50+50+200+50+50=400

注意:offsetWidth不能在display:none的div获得正确值,能够用jquery的outerWidth()正确获得

2.clientWidth



clientWidth=padding+height-滚动栏

这里等于:50+200+50-17=283

注意:jquery的innerWidth()可不把滚动栏计算进去,可得到结果300

3.scrollWidth



scrollWidth=padding+包括内容的全然高度

这里等于:50+402+50=502

4.scrollTop

定义:获取位于元素顶部边界与元素中当前可见内容的最顶端之间的距离

scrollTop=scrollHeight-clientHeight

=padding+包括内容的全然高度-(padding+height-滚动栏)

=包括内容的全然高度-height-滚动栏

DOM元素尺寸offsetWidth,scrollWidth,clientWidth等具体解释的更多相关文章

  1. DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

    [1] slientWidth 和 sclientHeight slientWidth:获取的是可视宽度 slientHeight:获取的是可视高度 <html> <head> ...

  2. 页面元素坐标和偏移(clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等)相关整理

    鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...

  3. 第一百一十七节,JavaScript,DOM元素尺寸和位置

    学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一.获取元素CSS大小 1. ...

  4. JS-学习-DOM元素尺寸和位置

    一,获取元素的css大小 1.通过style内联获取元素的大小 var box = document.getElementById('box');    // 获得元素;     box.style. ...

  5. DOM元素尺寸和位置

    一.获取元素 CSS大小 1.通过style 内联获取元素的大小 var box = document.getElementById('box'); //获取元素 box.style.width; / ...

  6. JavaScript(第二十一天)【DOM元素尺寸和位置】

    学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解.   一.获取元素CSS大小 ...

  7. H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLef ...

  8. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  9. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

随机推荐

  1. 上传APP加入视频预览--精简点名

    上传APP加入视频预览--精简点名 在为精简点名APP制作视频预览时的坑: 1.视频预览不能太长.也不能太短15-30s就好.我录制的是18s 2.视频的帧数不能太大.也就是说你在录制视频的时候.要慢 ...

  2. IDA .edata .rdata .idata .text segments

    .rdata is for const data. It is the read only version of the .data segment. .idata holds the import ...

  3. STM32 GPIO fast data transfer with DMA

    AN2548 -- 使用 STM32F101xx 和 STM32F103xx 的 DMA 控制器 DMA控制器 DMA是AMBA的先进高性能总线(AHB)上的设备,它有2个AHB端口: 一个是从端口, ...

  4. VC设置代理方法

      参考文章: VC 设置代理 Setting and Retrieving Internet Options Change Internet Proxy settings http://suppor ...

  5. mysql exists 如何使用

    还没时间看,exists用的少  ==>当你只需要判断后面的查询结果是否存 在时使用exists() http://edu.codepub.com/2011/0208/29218.php 今天正 ...

  6. Revit Family API 添加材质参数设置可见性

    start //添加类型 void AddType(FamilyManager familyMgr, string name, double w, double d) {     FamilyType ...

  7. 发布网站时应该把debug设置false

    在ASP.NET项目根目录下的Web.config中有这样的一个节点: <compilation debug="true" targetFramework="4.5 ...

  8. iOS非ARC内存管理摘要 - 实践型

    关于ios内存管理.在开发过程中,内存管理很重要,我简单说明一下. 1.正确用法 UIView *v = [[UIView alloc] init]; //分配后引用计数为1 [self.view a ...

  9. webrtc fec

    转自:http://www.cnblogs.com/webrtc/p/7402570.html WebRTC::FEC [TOC] Tags: WebRTC FEC WebRTC中的 FEC 实现分为 ...

  10. Unity3D 中鼠标按下时OnMouseDown()、Input.GetMouseButtonDown()和EventType.MouseDown的响应验证

    初学unity3D,对于其中的事件响应不是很清楚,于是写了下面的代码来验证: 1.新建.cs文件,名为testMouse.cs: using UnityEngine; using System.Col ...