js中offset,client , scroll 三大元素知识点总结


Posted in Javascript onSeptember 11, 2019

js 元素offset,client , scroll 三大系列总结

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 获得

以上就是本次介绍的全部知识点内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 #Javascript
node-red File读取好保存实例讲解
Sep 11 #Javascript
vue中nextTick用法实例
Sep 11 #Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 #Javascript
如何换个角度使用VUE过滤器详解
Sep 11 #Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 #jQuery
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 #Javascript
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
JS 网站性能优化笔记
2011/05/24 PHP
解析argc argv在php中的应用
2013/06/24 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
python正则表达式re模块详解
2014/06/25 Python
Python编程之string相关操作实例详解
2017/07/22 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Python ORM编程基础示例
2020/02/02 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
2014年环保工作总结
2014/11/26 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
浅谈Python响应式类库RxPy
2021/06/14 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技