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 ...
随机推荐
- 深度学习的batch_size
知乎讨论: https://www.zhihu.com/question/61607442/answer/204675996 案例一 http://www.myzaker.com/article/5a ...
- easyradius隆重发布ROS API计费接口,支持ROS 3.3以上版本,实现简单快捷的ROS宽带计费系统云端版
easyradius对接ROS也是使用的是ROS的api接口,即您要开启 /ip /service api服务,不了解api接口的,可以自己百度噢 开启API,就到easyradius配置通讯接口,具 ...
- js操作DOM在父元素中的结尾添加子节点注意
impressionHtml=`<img src=${value} alt=""/>`; document.getElementById("wrapper&q ...
- [React] 06 - Route: koa makes your life easier
听说koa比express更傻瓜化,真的? Koa 框架教程 本身代码只有1000多行,所有功能都通过插件实现,很符合 Unix 哲学. 搭建简单服务器 Koa, 架设一个简单的服务器 // demo ...
- 断网环境下利用pip安装Python离线安装包
这几天搞Windows离线断网环境下安装Python包,配置环境,各种坑!做个记录,供以后查询吧. # 生产环境 windows 7 # python 2.7.9 # pip 1.5.2 友情提示:当 ...
- JS 字符ASCII转换
var a="1368628429"; String.fromCharCode( a.substring(a.length-1,1).charCodeAt())=>" ...
- 转载->C#异常处理
C# 异常处理 异常是在程序执行期间出现的问题.C# 中的异常是对程序运行时出现的特殊情况的一种响应,比如尝试除以零. 异常提供了一种把程序控制权从某个部分转移到另一个部分的方式.C# 异常处理时建立 ...
- 23种设计模式之原型模式(Prototype)
在系统开发过程中,有时候有些对象需要被频繁创建,原型模式通过给出一个原型对象来指明所要创建的对象的类型,然后通过复制这个原型对象的办法,创建出更多同类型的对象.原型模式是一种对象创建型模式,用原型实例 ...
- python-Levenshtein几个计算字串相似度的函数解析
linux环境下,没有首先安装python_Levenshtein,用法如下: 重点介绍几个该包中的几个计算字串相似度的几个函数实现. 1. Levenshtein.hamming(str1, str ...
- 使用 tabindex 改变Tab 键顺序
使用 tabindex原文 https://developers.google.cn/web/fundamentals/accessibility/focus/using-tabindex 在表单上使 ...