第76天:jQuery中的宽高

Window对象和document对象的区别

1、window对象表示浏览器中打开的窗口

2、window对象可以省略,比如alert()也可以写成window.alert()

Document对象是window对象的一部分

浏览器的HTML文档成为dicument对象

Window.location和document.location

Window对象的location属性饮用的是location对象,表示该窗口中当前显示文档的URL

Document对象的location属性也是引用了location属性也是引用了location对象

Window.location===document.location//true

与window相关的宽高介绍

Window.innerWidth//浏览器窗口的内部宽度

.innerHeight//浏览器窗口的内部高度

.outerWidth

.outerHeight

Window.screen包含用户屏幕相关信息

.screen.height

.screen.width

.screen.availHeight

.screen.availWidth

Window.screenTop

Window.screenLeft

与document相关的宽高介绍

1、Client

document.body.clientWidth和document.body.clientHeight

指元素的可视部分宽度和高度,即padding+content.

若没有滚动条,即为元素设定的宽高

若有滚动条,则为原来宽高减去滚动条的宽高

无padding无滚动:clientWidth=style.width

有padding无滚动:clientWidth=style.width+style.padding*2

有padding有滚动:clientWidth=style.width+style.padding*2-滚动条宽度

document.body.clientLeft和document.body.clientTop

指元素周围边框的厚度,如果不指定边框或不定位元素,值为0

clientTop=border-top的border-width

clientLeft=border-left的border-width

2、Offset

offsetWidth和offsetHeight

指元素的border+padding+content的宽度和高度

该属性和内部的内容是否超出元素大小无关,只和设定的border以及width和height有关

无padding无滚动无border

offsetWidth=clientWidth=style.width

有padding无滚动条有border

offsetWidth=clientWidth+border宽度*2=style.width+style.padding*2+(border-width)*2

有padding有滚动条有border

offsetWidth=style.width+style.padding*2+(border-width)*2=clientWidth+滚动轴宽度+border宽度*2

offsetLeft和offsetTop

如果当前元素的父元素没有定位,则offsetParent为body

如果有定位,offsetParent取最近的父元素

3、Scroll

scrollWidth和scrollHeight

如图

scrollTop

scrollLeft

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏电光石火

雪花代码

<style type="text/css"> .large-header {background: #333;} </style> <div id="la...

21390
来自专栏阮一峰的网络日志

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小...

44070
来自专栏前端菜鸟变老鸟

知识点:回到顶部(减速)、滚动禁用和启用、判断滚动条位置显示某元素、使用jQuery判断字符串是不是json格式

方法: 1. 锚点 2. scrollTop 3. scrollTo 4. scrollBy 5. scrollIntoView

10310
来自专栏Youngxj

CSS打造的动感loading效果

37940
来自专栏IMWeb前端团队

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 最近在做组件的过程中遇到滚动到底部需要加载更多的需求,发现每个HTML元...

39550
来自专栏Golang语言社区

JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Mod...

40430
来自专栏谈补锅

Quartz2D复习(一)--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图

1、Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统; Quart2D的API是纯C语言的,API来自于Core  Graphics框架:

15510
来自专栏一“技”之长

OS X开发:NSProgressIndicator进度指示器控件

    NSProgressIndicator是OS X平台上的活动指示器控件,开发者可以设置圆环样式和进度条样式两种。

17210
来自专栏ShaoYL

frame方式布局一段文子,设置宽高

29960
来自专栏前端下午茶

JS 中的offset、scroll、client总结

经常碰到offset、scroll、client这几个关键字,每次都要各种实验,这里总结一下。

25830

扫码关注云+社区

领取腾讯云代金券