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相关笔记的更多相关文章

  1. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  2. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  3. js中 offset /client /scroll总结

    offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...

  4. js 元素offset,client , scroll 三大系列总结

    1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...

  5. offset client scroll

    offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...

  6. bom中的offset,client,scroll

    简单明了

  7. JS 中的offset、scroll、client总结

    经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...

  8. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  9. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

随机推荐

  1. webservice linux 杀进程

    一 .  linux 下首先查看进程 ./stopServcer.sh server1如果停不掉websphere服务.则强制杀掉其进程! 1.查看websphere进程号bejqylc06:~ #  ...

  2. 【Debian】install

    n年前的报废台式机实在不能忍受xp的速度,果断装Linux近期家里的小本装了Ubuntu14.04 ,实在不习惯最新的图形界面.装个debian试试吧. 1.专门弄一个空白分区2.官网下载debian ...

  3. C#中引用类型和值类型分别有哪些

  4. android eclipse 环境配置(win 7)

    一.下载安装android SDK 两种方式: (1)官网下载(需FQ):https://developer.android.com/studio/index.html (2)无需FQ下载:http: ...

  5. java倒序输出List

    先贴代码 package com.tsubasa.collection; import java.util.ArrayList; import java.util.Arrays; import jav ...

  6. 在Scrapy中使用IP池或用户代理更新版(python3)

    middlewares.py # -*- coding: utf-8 -*- # 导入随机模块 import random # 导入有关IP池有关的模块 from scrapy.downloaderm ...

  7. 使用node,express,mongodb,ionic,ejs搭建的简单app个人总结

    1.每次修改app.js或者其他路由js文件,都必须重启node app.js,否则修改不起作用!!! 2.<link rel="stylesheet" href=" ...

  8. ubuntu搭建java web环境

    java web环境即jdk+tomcat+mysql jdk:http://www.oracle.com/technetwork/java/javase/downloads/index.html t ...

  9. mysqldump迁移说明

    使用mysqldump导出数据, 数据包含单行insert,带字段值 #使用mysqldump备份数据到文件, 主要在每个分片的主上面进行备份,确保数据是最新的. mysqldump -h192. - ...

  10. prometheus配置

    本文主要记录下测试环境积累的prometheus配置信息,主要是k8s基本节点的配置和cadvisor的配置,方便以后使用做为参考 global: scrape_interval: 30s scrap ...