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 ...
随机推荐
- wpf 模板选择器DataTemplateSelector及动态绑定,DataTemplate.Triggers触发器的使用
通常,如果有多个 DataTemplate 可用于同一类型的对象,并且您希望根据每个数据对象的属性提供自己的逻辑来选择要应用的 DataTemplate,则应创建 DataTemplateSelect ...
- Kafka 1.1新功能:数据的路径间迁移
经常有小伙伴有这样的疑问:为什么线上Kafka机器各个磁盘间的占用不均匀,经常出现“一边倒”的情形? 这是因为Kafka只保证分区数量在各个磁盘上均匀分布,但它无法知晓每个分区实际占用空间,故很有可能 ...
- c++11 auto 与 decltype 详解
转自: here 一. auto简介 编程时候常常需要把表达式的值付给变量,需要在声明变量的时候清楚的知道变量是什么类型.然而做到这一点并非那么容易(特别是模板中),有时候根本做不到.为了解决这个问题 ...
- android.DataBindingUtil
import android.databinding.DataBindingUtil import android.os.Bundle import android.support.v7.app.Ap ...
- 试着理解cookie和session
web服务一个特点是提供个性化服务,为很多客户端提供服务,那么每个用户不同,服务自然不同,所以要记住用户及其状态,这也很多应用软件的通用功能. 由于http是无状态的,Session和Cookie是两 ...
- spring的一些其他功能
今天看书,知识点多一点了,涉及到了较多的知识,如scheduling计划任务,spring对多线程的支持,以及配置开发.测试和生产环境的profile.这些都是集成在spring中的,需要用时可以参考 ...
- 带分数|2013年蓝桥杯B组题解析第九题-fishers
带分数 100 可以表示为带分数的形式:100 = 3 + 69258 / 714 还可以表示为:100 = 82 + 3546 / 197 注意特征:带分数中,数字1~9分别出现且只出现一次(不包含 ...
- 启动elk中elasticsearch服务报错which: no java in (/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin)
解决办法: vi /etc/sysconfig/elasticsearch JAVA_HOME=/usr/local/java sudo systemctl restart elasticsearch ...
- [No000012D]WPF(5/7)依赖属性
介绍 WPF带来了很多传统 Windows 应用程序没有的新特性和选择.我们已经讨论了一些 WPF 的特性,是时候更进一步介绍其他特性了.当你读完这个系列之前的文章,我希望你已经或多或少地了解了 WP ...
- [No0000109]Git2/9-安装Git
最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和Window ...