JavaScript、关于元素的offset~和client~
1、偏移量(offset dimension)
=>offsetLeft(元素距离其父元素左边框(/上边框)的距离)=>offsetTop
=>offsetWidth(元素的宽度/高度,包括元素的内容、内边距和边框)
=>offsetHeight
=>offsetParent(元素的父元素)
2、客户区的大小(client dimension)
=>clientWidth(元素的宽度(/高度),包括元素的内容和内边距)
=>clientHeight
注意:浏览器窗口大小可以使用document.documentElement或document.body(在IE7之前的版本中)
function getViewport() {
if(document.compatMode == "BackCompat"){
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}else{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
3、滚动大小(scroll dimension)
=>scrollHeight(滚动内容的实际宽度(高度),在没有滚动条的条件下,元素内容总高度(/宽度))
=>scrollWidth
=>scrollLeft(被隐藏在内容区域左侧(/上方)的像素数,通过这个元素可以改变元素的滚动位置)
=>scrollTop
JavaScript、关于元素的offset~和client~的更多相关文章
- JavaScript offset、client、scroll家族
offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
- offset 、 client 和 scroll - PC端网页特效
1.元素偏移量 offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...
- JavaScript通过元素id和name直接获取元素的方法
概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...
- javascript中元素的scrollLeft和scrollTop属性说明
再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidd ...
- JavaScript获取元素样式
原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...
- 详细解析 JavaScript 获取元素的坐标
引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...
- JavaScript实现元素拖动性能优化
前言:前几天没事干写了个小网站,打算用原生的javascript实现元素的拖动,但是事情并没有想象的那么顺利,首先是实现了拖动的元素卡的不能再卡,简直不能够,上图~~ 看见没?这就是效果,简直让人欲哭 ...
- div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。
先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...
随机推荐
- Android studio 怎么使用单元测试(不需要device)
关于单元测试的使用,写代码过程中有时候需要检测下代码逻辑的可行性与正确性,又不想通过设备运行,那么就可以通过单元测试跑下代码~ 1.首先建立一个Android studio的Android项目: 2. ...
- Linux系统排查4——网络篇
用于排查Linux系统的网络故障. 网络排查一般是有一定的思路和顺序的,其实排查的思路就是根据具体的问题逐段排除故障可能发生的地方,最终确定问题. 所以首先要问一问,网络问题是什么,是不通,还是慢? ...
- 自windows8以后,所有版本(专业版、企业版、旗舰版)都支持从 vhd 启动
而在windows 7 中,只有:企业版.旗舰版: 支持 从 vhd 启动!
- linux 环境变量字符串的优先顺序
/data/miniconda3dir/envs/mtfy/bin:$PATH 和$PATH:/data/miniconda3dir/envs/mtfy/bin 区别是非常大. 在linux中不同环境 ...
- [PHP] 04 - Upload files
PHP date() 函数 参数定义了格式 <?php echo date("Y/m/d") . "<br>"; echo date(&quo ...
- 解决wireshark检测不到网卡的问题
第一步 1.打开windows设备管理器. 2.查看-显示隐藏的设备 3.非即插即用驱动程序 4.NetGroup Packet Filter Driver 右键属性---驱动程序---启动类型,修改 ...
- Android使用Fragment实现TabHost效果
现在Fragment的应用真的是越来越广泛了,之前Android在3.0版本加入Fragment的时候,主要是为了解决Android Pad屏幕比较大,空间不能充分利用的问题,但现在即使只是在手机上, ...
- SQL Server 2012 R2升级到SQL Server 2016无法正常启动数据库服务解决方案
原定周末把公司的TFS升级到2018,由于TFS 2018需要SQL Server至少是2016以上版本,所以还需要将原来的SQL Server 2012 R2一并升级.今天早上负责的同事告诉我升级失 ...
- collections模块和os模块
collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict. ...
- FastJson 自定义Serialize、Parser
FastJson 自定义Serialize.Parser 今天在处理Json反序列化时,在C#传过来的JSON字符串中枚举类型为int类型,FastJson对于枚举的处理有两种类型,一种是字符串一种是 ...