样例:

<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. TC SRM601

    250 水题,上来想一下就可以搞了. 500,比赛时候没有想出来,结束后补了下,感觉很简单. 只要枚举两个集合异或结果哪一位二进制位不同,因为大小由最高位不同决定. 然后进行DP就可以了,比较好的题目 ...

  2. dbMigration .NET 数据同步迁移工具

    官网:http://fishcodelib.com/DBMigration.htm

  3. 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(4)

    chsakell分享了一个前端使用AngularJS,后端使用ASP.NET Web API的项目. 源码: https://github.com/chsakell/spa-webapi-angula ...

  4. AngularJS一个由于未声明对象而报的错

    实现这样的一个需求:点击某个按钮,然后显示或隐藏某块区域. 先注册一个AngularJS的一个module: var myApp = angular.module("myApp", ...

  5. I/O会一直占用CPU吗?【转载】

    转自:https://www.zhihu.com/question/27734728 知乎上看到的一个提问,可以参考 如下图:(图片摘自网络) 在进行I/O操作的时候,是将任务交给DMA来处理,请求发 ...

  6. Linux学习18-gitlab新建项目提交代码

    前言 gitlab前面已经搭建好了,如果我们想用把代码上传到gitlab仓库上的话,先要新建一个项目仓库.然后本地安装git环境,就可以提交了 root用户 gitlab首次在浏览器上打开web页面, ...

  7. Linux学习4-阿里云服务器(CentOS)下使用 Tomcat安装 Jenkins

    前言 通常做自动化测试,需要用到jenkins来做持续集成,那么linux系统里面如何使用tomcat安装Jenkins环境呢? 前面一篇已经搭建好java和tomcat环境,接着直接下载jenkin ...

  8. mysql递归查询从子类ID查询所有父类

    先来看数据表的结构如下: id  name    parent_id  ---------------------------  1   Home        0  2   About        ...

  9. redis实现秒杀demo

    代码 package com.prosay.redis; import java.util.List; import redis.clients.jedis.Jedis; import redis.c ...

  10. Kubeadm安装Kubernetes环境

    Kubeadm方式号称一键安装部署,很多人也试过并且顺利成功,可到了我这里因为折腾系统问题,倒腾出不少的坑出来. kubeadm好处是自动配置了必要的服务,以及缺省配置了安全的认证,etcd,apis ...