offset,client,scroll,style,getBoundingClientRect相关笔记
1.offsetTop
功能:获取元素上外缘与最近的定位父元素内壁的距离,如果没有定位父元素,则是与文档上内壁的距离
使用方法:js document.querySelector(...).offsetTop 返回数字类型 只读
注解:边缘:border以外
定位父元素:position为relative,absolute或fixed
内壁:border以内
1.1 style.top
功能:与offsetTop相同
使用方法:js document.querySelector(...).style.top
区别:
a.本身得是定位元素,否则设置了也没有意义;
b.可读写;
c.读:返回字符串,如果没有给它在行内设置top属性,一律返回空字符串,经测试,在<style></style>中写入无用,必须是行内!(操蛋!)
d.写:设置字符串,加上单位,可以是负值,style.top,style.left等均可设置,不管之前有没有写入,行内还是行外均可。
2.offsetLeft
功能:获取元素左外缘与最近的定位父元素内壁的距离,如果没有定位父元素,则是与文档左内壁的距离
使用方法:js document.querySelector(...).offsetLeft 返回数字类型 只读
注解: 不存在offsetBottom或者offsetRight
2.2 style.left(类style.top)
还有style.width,style.height...特性都和style.top一样,一样操蛋。。
3.offsetWidth
功能:获取可视width+padding+border 不包括margin和外滚动条,包括内滚动条
使用方法: js document.querySelector(...).offsetWidth 返回数字类型
什么是可视区域,实际区域?
比如a元素包含b元素,b内容超长,a元素的可视区域就是现在可见的b元素区域,实际区域就是b的全部区域,注意针对的是a元素而不是b元素!对于b元素,可视区域,实际区域是一样的!
4.offsetHeight
功能:获取可视height+padding+border 不包括margin和外滚动条,包括内滚动条
使用方法: js document.querySelector(...).offsetHeight 返回数字类型
备注:JQuery有offset方法,返回的是相当于文档的距离,返回数据为对象{left: 左偏移,top: 上偏移} 偏移值为数字类型
5.clientWidth
功能:获取可视width+ padding,不包括内滚动条
使用方法:js document.querySelector(...).clientWidth 返回数字类型
5.clientHeight
功能:获取可视width+ padding,不包括内滚动条
使用方法:js document.querySelector(...).clientHeight 返回数字类型
6.scrollLeft
功能:获取左移的距离,只能为>=0的数值,越往左越大 可读可写
使用方法:js document.querySelector(...).scrollLeft 返回数字类型
注意事项:使用时相对父元素!
7.scrollTop
功能:获取上移的距离,只能为>=0的数值,越往上越大 可读可写
使用方法:js document.querySelector(...).scrollTop 返回数字类型
注意事项:使用时相对父元素!
8.scrollWidth
功能:获取实际宽度(可超出可视区域!不会比clientWidth小),不包括内滚动条
8.scrollHeight
功能:获取实际高度(可超出可视区域!不会比clientHeigtht小),不包括内滚动条
注意事项:
由于个人习惯,使用时总是倾向于相对子元素而非包含它的父元素,实际上恰恰相反!
在横向出现滚动条的情况下(内部出现,这时不同浏览器对滚动条的处理不同数值会有差异,比如IE,clientWidth会减小,有些不变!width才是实际宽度)
所以大小关系为clientWidth<= width<=offsetWidth,scrollWidth有时最大
特别注意:
出于jquery的习惯,很多人习惯于写document.querySelector(...).width和document.querySelector(...).height
写法是大错特错的,在chrome,IE,firefox上将返回0,safari上返回undefined。
document.documentElement 选择html,document.body选择body
9.getBoundingClientRect
功能:获取元素相对浏览器窗口的位置信息,返回一个对象,包含top、bottom、left、right、width、height
offset,client,scroll,style,getBoundingClientRect相关笔记的更多相关文章
- offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- js中 offset /client /scroll总结
offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...
- js 元素offset,client , scroll 三大系列总结
1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...
- offset client scroll
offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...
- bom中的offset,client,scroll
简单明了
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
随机推荐
- webservice linux 杀进程
一 . linux 下首先查看进程 ./stopServcer.sh server1如果停不掉websphere服务.则强制杀掉其进程! 1.查看websphere进程号bejqylc06:~ # ...
- 【Debian】install
n年前的报废台式机实在不能忍受xp的速度,果断装Linux近期家里的小本装了Ubuntu14.04 ,实在不习惯最新的图形界面.装个debian试试吧. 1.专门弄一个空白分区2.官网下载debian ...
- C#中引用类型和值类型分别有哪些
- android eclipse 环境配置(win 7)
一.下载安装android SDK 两种方式: (1)官网下载(需FQ):https://developer.android.com/studio/index.html (2)无需FQ下载:http: ...
- java倒序输出List
先贴代码 package com.tsubasa.collection; import java.util.ArrayList; import java.util.Arrays; import jav ...
- 在Scrapy中使用IP池或用户代理更新版(python3)
middlewares.py # -*- coding: utf-8 -*- # 导入随机模块 import random # 导入有关IP池有关的模块 from scrapy.downloaderm ...
- 使用node,express,mongodb,ionic,ejs搭建的简单app个人总结
1.每次修改app.js或者其他路由js文件,都必须重启node app.js,否则修改不起作用!!! 2.<link rel="stylesheet" href=" ...
- ubuntu搭建java web环境
java web环境即jdk+tomcat+mysql jdk:http://www.oracle.com/technetwork/java/javase/downloads/index.html t ...
- mysqldump迁移说明
使用mysqldump导出数据, 数据包含单行insert,带字段值 #使用mysqldump备份数据到文件, 主要在每个分片的主上面进行备份,确保数据是最新的. mysqldump -h192. - ...
- prometheus配置
本文主要记录下测试环境积累的prometheus配置信息,主要是k8s基本节点的配置和cadvisor的配置,方便以后使用做为参考 global: scrape_interval: 30s scrap ...