1，element.offsetWidth : 包括 padding 和 边框

2，element.clientWidth : 包括 padding ，不包含边框 ， 内容超出会溢出盒子的时候，就用scrollWidth

3，element.scrollWidth : 不包含边框

主要用法：

1，offset 系列 经常用于获得元素位置 offsetLeft  offsetTop

2，client经常用于获取元素大小， clientWidth , clientHeight

3，scroll经常用于获取滚动距离，scrollTop  scrollLeft

4，注意页面滚动距离 通过 window.pageXoffset  window.pageYoffset 获得

js 元素offset,client , scroll 三大系列总结的更多相关文章

  1. js中 offset /client /scroll总结

    offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...

  2. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  3. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  4. offset client scroll

    offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...

  5. bom中的offset,client,scroll

    简单明了

  6. JS 中的offset、scroll、client总结

    经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...

  7. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  8. 三大家族(offset、scroll、client)

    offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...

  9. 前端 ---client、offset、scroll系列

    client.offset.scroll系列   1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...

随机推荐

  1. vue router 如何使用params query传参，以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  2. C++入门经典-例4.9-输出不同生命周期的变量值

    1:代码如下: // 4.9.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using ...

  3. docker运行jpress

    1.前提安装好docker mkdir docker//建立工作文件夹 cd docker 2.下载tomcat镜像和jpress开源项目 docker pull docker pull hub.c. ...

  4. redhat下配置SEED DVS6446开发环境3

    1.运行arm_v5t_le-gcc,报错为: 64bit的Linux操作系统,无法运行32bit的应用程序 /lib/ld-linux.so.2: bad ELF interpreter: No s ...

  5. select框可编辑

    $(function(){ $("#select").editableSelect({ //$("#select")为select框id effects: 's ...

  6. RTX数据表分析

    /******************************************* * UserName 做主键 **************************************** ...

  7. ffi模块——node调用动态链接库(.so/.dll文件)

    参考资料1:[https://www.npmjs.com/package/ffi] 参考资料2:[http://imweb.io/topic/57732fbef0a5487b05f325bf] 参考资 ...

  8. line-height 与 height 的区别

    line-height是行高的意思,它决定了元素中文本内容的高度,height则是定义元素自身的高度. height:表示  行高 line-height:表示   每行文字所占的高度   举例: 第 ...

  9. Nginx的用途

    Nginx应该是现在最火的web和反向代理服务器,没有之一.她是一款诞生于俄罗斯的高性能web服务器,尤其在高并发情况下,相较Apache,有优异的表现. 那除了负载均衡,她还有什么其他的用途呢,下面 ...

  10. 13.56Mhz/NFC读写器天线阻抗匹配调试步骤-20191128

    相关原文: https://blog.csdn.net/wwt18811707971/article/details/80641432 http://www.52rd.com/Blog/Detail_ ...