首先定义一个div。

然后稍微装修一下

下面开始区分

一、clientWidth和clientHeigh 、 clientTop和clientLeft

1,clientWidth的实际宽度

clientWidth = width+左右padding

2,clientHeigh的实际高度

clientHeigh = height + 上下padding

3,clientTop的实际宽度

clientTop = boder.top(上边框的宽度)

4,clientLeft的实际宽度

clientLeft = boder.left(左边框的宽度)

二、offsetWidth和offsetHight 、 offsetTop和offsetLeft

1,offsetWidth的实际宽度

offsetWidth = width + 左右padding + 左右boder

2,offsetHeith的实际高度

offsetHeith = height + 上下padding + 上下boder

3,offsetTop实际宽度

offsetTop:当前元素 上边框 外边缘 到 最近的已定位父级(offsetParent) 上边框 内边缘的 距离。如果父

级都没有定位,则分别是到body 顶部 和左边的距离

4,offsetLeft实际宽度

offsetLeft:当前元素 左边框 外边缘 到 最近的已定位父级(offsetParent) 左边框 内边缘的            距离。如果父级都没有定位,则分别是到body 顶部 和左边的距离

三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

1,scrollWidth实际宽度

scrollWidth:获取指定标签内容层的真实宽度(可视区域宽度+被隐藏区域宽度)。

2,scrollHeight的实际高度

scrollHeight:获取指定标签内容层的真实高度(可视区域高度+被隐藏区域高度)

3,scrollTop

scrollTop :内容层顶部 到 可视区域顶部的距离。

实例:

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

持续获取高度的方式:

window.addEventListener('scroll', ()=>{

  var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

});

4,scrollLeft

scrollLeft:内容层左端 到 可视区域左端的距离.

css 元素实际宽高的更多相关文章

  1. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  2. 隐藏元素的宽高无法通过原生js获取的问题

    1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...

  3. 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高

    1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...

  4. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

  5. jquery获取元素各种宽高及页面宽高总结

    window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/mar ...

  6. js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

  7. jquery获取元素各种宽高及页面宽高

    如何使用jquery来获取网页里各种高度? 示例如下: $(document).ready(function(){  var divWidth = $("#div").width( ...

  8. 如何获取设置display:none元素及子元素的宽高

    由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 ...

  9. JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...

随机推荐

  1. 基于Spring注解的上下文初始化过程源码解析(一)

    最近工作之余有时间和精力,加上平时对源码比较感兴趣,就开始啃起了Spring源码.为加深印象写了这篇博客,如有错误,望各位大佬不吝指正. 我看的是Spring5的源码,从同性社区download下来后 ...

  2. 初识代理——Proxy

    无处不在的模式——Proxy 最近在看<设计模式之禅>,看到代理模式这一章的时候,发现自己在写spring项目的时候其实很多时候都用到了代理,无论是依赖注入.AOP还是其他,可以说是无处不 ...

  3. 通过jmeter发送webservice接口请求

    1.webservice接口地址:http://ip:port/...?wsdl 2.接口数据类型:<cuxGmiChukuRmaTrxV><salesrepId xmlns:xsi ...

  4. android ——多线程编程

    1.定义一个线程只需要新建一个类继承自Thread.然后重写run()方法,并在里面编写耗时逻辑即可: class MyThread extends Thread{ public void run() ...

  5. django报错信息解决方法

    You have 17 unapplied migration(s). Your project may not work properly until you apply the migration ...

  6. 1.1Django简介和虚拟环境配置

    MVC 大部分开发语言中都有MVC框架 MVC框架的核心思想是:解耦 降低各功能模块之间的耦合性,方便变更,更容易重构代码,最大程度上实现代码的重用 m表示model,主要用于对数据库层的封装 v表示 ...

  7. API开发之接口安全(二)-----sign校验

    上一章 我们说了 sign的生成 那么 我们如何确定这个sign的准确性呢 下来 我们说说 校验sign的那些事 在拿到header里面的内容之后 我们首先需要对其内容的基本参数做一个校验 我们补充下 ...

  8. GitPage部署

    前言 该文章主要为了记录我如何在GitPage上面部署博客网站,这里的话,码云上面也有相同的功能. 若有小伙伴担心GitHub担心把中国的访问也禁了的话(大概不会吧),可以在码云上面部署.流程应该是差 ...

  9. 面试java_后端面经_5

    情话部分: 小姐姐:为什么有很多人在感情中付出很多,却得不到想要的结果? 你答:我听过一个这样的故事:讲的是蚯蚓一家人,有一天,蚯蚓爸爸特别无聊,就把自己切成了俩段愉快的打羽毛球去了,蚯蚓妈妈见状,把 ...

  10. 自定义Dialog---实现优美对话框

    PS:自定义dialog,一些系统的dialog已经不能满足开发人员的需求了,所以,我们需要自定义一个属于并且适合自己项目的对话框,无论是颜色还是功能需求上都是和自己的项目紧密相关的,一些系统的对话框 ...