文档章节

js以及jquery中关于尺寸和位置的方法和属性

LGolden
 LGolden
发布于 2017/07/31 11:07
字数 635
阅读 21
收藏 0

①网页被卷起的宽度或高度

解释:如果一个div,高度只有200px,即它的尺寸是受限的。当该div的内容高度超过div本身高度时,就会产生滚动条,拉动滚动条,div就会有卷起来的高度。

也就是说,一个元素,是否具有卷起来的高度或宽度,要看它内部的内容是否超过它本身,如果没有超过,比如一个不限制高度的div,是永远不会有卷起来的高度的

默认的,html元素,或者是body元素,虽然没有限制高度,但是一旦内容超过浏览器窗口,也会产生滚动条,因此,html和body元素默认具有卷起来的高度,而不用限制height

js方法:

var h = document.documentElement.scrollTop || document.body.scrollTop;
var w = document.documentElement.scrollLeft || document.body.scrollLeft;

||是非常好用的运算符,用来解决兼容性问题。当然也可以使用三目运算发?::或者if语句解决兼容性。

jquery方法:

JqueryObject.scrollTop();
JqueryObject.scrollLeft();

注意:如果是浏览器卷起来高度,对象是window对象,即:

$(window).scrollTop();

卷起来高度示意图:

灰色代表浏览器窗口(不包括工具栏,网址输入栏等),蓝色和棕红代表2个元素,绿色是滚动条。

②元素距离文档的偏移量

解释:这里的文档是指document。比如,你写了3个div,示意如图:

这3个div就是一个document。所谓获取距离文档的偏移量,就是指文档中元素位于文档中的何处位置的距离。可以看出来,第2个div(棕红色)距离文档顶部的距离offsetTop的距离为第一个div(蓝色)的高度。不管是否滚动条滚动,文档向上还是向下移动,第2个div的offsetTop都不会发生改变(因为它所处的文档的位置没有改变)。

js方法:

DOM对象.offsetTop;
DOM对象.offsetLeft;

Jquery方法:

JqueryObject.offset().top;
JqueryObject.offset().left;

③元素相对于当前浏览器窗口的位置

解释:浏览器窗口可以上下左右拉伸。如何获取一个div元素在当前视角下的偏移量呢。示意如图:

获取如图所示的距离,即为元素相对于当前视角的距离。

方法:先获取第2个div的文档顶部距离,然后减去window对象卷起来距离,示意如图:

即:

$('第二个div对象').offset().top-$(window).scrollTop()

 

© 著作权归作者所有

LGolden
粉丝 1
博文 28
码字总数 18762
作品 0
南京
程序员
私信 提问
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
2018/07/31
19
0
DOM对象和js对象以及jQuery对象的区别

DOM对象和js对象以及jQuery对象的区别 一、DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口。 DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修...

奋斗的雲
2018/09/17
34
0
JS对象与Dom对象与jQuery对象之间的区别

前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 分析: 其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象 解......

苦水润喉
2018/08/16
0
0
python前端jQuery入门

知识点预习 1.jQuery的加载2.jQuery选择器 3.jQuery的click事件 4.jQuery的样式操作 5.jQuery动画 01- 封闭函数 作用:避免在修改他人代码时出现 方法同名替换的情况想让一个函数直接执行用封...

czbkzmj
2018/12/07
0
0
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge
2018/05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
44分钟前
3
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部