offset系列、scroll系列与client系列
- offset系列:
- offsetLeft:获取元素距离最左边的距离,自身的margin包括在内,不包括自身的border
- offsetTop:获取元素距离最上边的距离,自身的margin包括在内,不包括自身的border
- offsetWidth:获取元素的宽度,包括border及以内,不包括margin
- offsetHeight:获取元素的高度,包括border及以内,不包括margin
- offsetParent:获取元素的定位父级元素:
- 如果元素fixed定位,得到null;
- 元素没有fixed情况下如果元素所有的父级元素都没定位,得到body;
- 元素没有fixed情况下,父级元素有定位,得到离他最近的有定位的父级元素
- scroll系列
- scrollTop和scrollLeft:获得的是内容卷曲出去的高度和宽度,当滚动条向下拉时,内容往上走,获得的就是上面跑出盒子范围的那部分高度。滚动条向右拉同理
- scrollWidth和scrollHeight:获得元素的实际宽度和高度,在内容没有超出盒子时,获得的是盒子的内部高度和宽度。内容超出盒子时获得的是内容实际应有的高度和宽度。当盒子内部存在滚动条时,获得的高度和宽度不包括滚动条。
- var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
根据浏览器兼容性,scroll系列需要写出兼容代码:例如scrollTop:
- client系列
- clientTop和clientLeft:获得上边框和左边框的宽度。
- clientWidth和clientHeight:获取可视范围的宽度高度,即边框内部的,不包括border,包括padding.当盒子内部存在滚动条时,获得的高度和宽度不包括滚动条。
offset系列、scroll系列与client系列的更多相关文章
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- 差别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...
- 区别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...
- offset系列,client系列,scroll系列回顾
一 scroll系列属性 ——滚动
- 元素的属性:client系列,scroll系列,offset系
元素的属性 div.attributes 是所有标签属性构成的数组集合 dir.classList 是所有class名构成的数组集合 在classList的原型链上看一看到从 add()和remove ...
- 前端 ---client、offset、scroll系列
client.offset.scroll系列 1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- 4.client、offset、scroll系列
client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域 ...
- client系列、offset系列、scroll系列
一.client系列 clientWidth/clientHeight 是我们设置的宽和高加上内边距(没有边框) clientLeft/clientTop 就是我们设置的边框值 二.offset ...
随机推荐
- python之集合及其方法---整理集
集合的定义: 由不同元素组成.一组无序排列的可hash值.集合中元素必须是不可变类型 集合的定义方式: 由大括号组成: 每个元素用逗号分隔: 元素书写不是key-value形式: 集合是由不同元素组成 ...
- keepalived vip 没有生成或者生成了ping不通?
1 问题现象:keepalived已启动但vip 没有生成./var/log/messages日志不断刷屏 tail /var/log/messages Nov :: cache-redis- Kee ...
- 项目总结22:Java UDP Socket数据的发送和接收
项目总结22:Java UDP Socket数据的发送和接收 1-先上demo 客户端(发送数据) package com.hs.pretest.udp; import java.io.IOExcep ...
- python-django(创建项目、应用、运行)
1.创建项目.应用 方法一.命令行创建 <1>.创建项目命令 django-admin startproject 项目名称 <2>.创建应用命令 django-admin s ...
- vue学习笔记(nvm安装)
https://github.com/creationix/nvm https://github.com/coreybutler/nvm-windows 慕课网:https://www.imooc.c ...
- oracle错误(ORA:12154 ORA:01034 和 ORA:27101 ORA-18008 ORA-01081)
按照正常操作流程,启动项目,发现项目报错,原因是连接不上oracle数据库, PLSQL连接时报错,错误码 ORA:12154 无法解析指定的连接标识符 第一次,遇到这个错误,在网上找了资料都是需要 ...
- python基础 (迭代器回顾,生成器,推导式)
1.迭代器回顾 可迭代对象:Iterable 可以直接作用于for循环的对象统称为可迭代对象:Iterable.因为可迭代对象里面存在可迭代协议,所以才会被迭代 可迭代对象包括: 列表(list) 元 ...
- 包管理工具-yarn
今天知道了一个新的包管理工具叫yarn,总结如下: 如果你知道npm的使用过程,那么yarn你就觉着相见恨晚呐...... npm存在的问题: >安装的时候无法保证速度的一致性 >安全问题 ...
- Handler processing failed; nested exception is java.lang.NoSuchMethodError: org.apache.commons.codec.digest.DigestUtils.sha1Hex(Ljava/lang/String;)Ljava/lang/String;
异常:Handler processing failed; nested exception is java.lang.NoSuchMethodError: org.apache.commons.co ...
- Android.mk学习
2019-03-31 学习变量 $(call my-dir) /usr/bin2/android-ndk-r16/build/core $(CLEAR_VARS) /usr/bin2/android- ...