jquery-文档宽高-窗口宽高-scrollTop与scrollLeft

最新推荐文章于 2019-11-28 11:27:26 发布
原创 最新推荐文章于 2019-11-28 11:27:26 发布 · 313 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍如何使用JavaScript获取网页的宽度、高度及滚动位置，包括文档对象与窗口对象的尺寸测量方法，以及如何获取页面的向上和向左滚动距离。

考点

获取页面文档的宽度
文档对象.width()
$(document).width()

获取页面文档的高度
文档对象.height()
$(document).height()


获取窗口对象的宽度
窗口对象.width()
$(window).width()

获取窗口对象的高度
窗口对象.height()
$(window).height()


获取页面的向上滚动距离
$(document).scrollTop()
文档对象.scrollTop()

获取页面的向左滚动距离
$(document).scrollLeft()
文档对象.scrollLeft()

获取页面文档的宽度和高度

文档对象.width()

文档对象.height()

$(document).width()

$(document).width()

在这里插入图片描述

获取窗口对象的宽与高

在这里插入图片描述

获取页面的滚动距离

在这里插入图片描述

scrollTop()，scroll滚动的意思，top向上的意思

scrollLeft()

在这里插入图片描述

在这里插入图片描述

jQuery获取文档和窗口宽度和高度的方法
ByteZenith的博客
10-07 354
在这篇文章中，我们将探讨如何使用jQuery来获取文档和窗口的宽度和高度。这些信息对于响应式设计和布局非常重要，因为它们帮助我们确定页面的尺寸和浏览器视口的大小。在本文中，我们学习了如何使用jQuery来获取文档和窗口的宽度和高度。来获取文档的宽度和高度，并将结果打印到控制台。这些方法返回浏览器窗口的宽度和高度（不包括滚动条）。这些方法返回文档的宽度和高度（包括滚动条）。来获取窗口的宽度和高度，并将结果打印到控制台。要获取文档的宽度和高度，我们可以使用。要获取窗口的宽度和高度，我们可以使用。
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
10-24
官方文档的解释有点含糊，其实换个角度就很容易理解了，scrollTop获取的是内部元素超出外部容器的高度。例如：$('window').scrollTop()获取的就是当前这个页面超出窗口最上端的高度，scrollLeft与此同理
jQuery中scrollTop()方法解析
ITzhongzi的博客
03-20 3389
在jq中，scrollTop（）方法： 调用方式： jq对象.scrollTop()   1、当不传入任何参数时，获取 调用该方法的jq对象中匹配的dom元素的子元素卷起的高度。 2、当传入一个参数的时候，表示设置 调用该方法的jq对象中匹配的dom元素的子元素的据其高度 示例demo1：（不传参数 获取p内部卷起的高度） html>head> styl
【整理】原生js和jQ获取窗口宽高及滚动条的方法和函数
weixin_33752045的博客
11-14 226
原生js和jQ获取窗口宽高及滚动条的方法和函数 一。原生js获取 1.实际宽高（不包括工具栏，滚动条的视口高度，ie6.7.8不支持） window.innerHeight window.innerWidth 2.显示屏宽高 screen.height screen.width 3..显示屏宽高（除windows任务栏之外的高度）屏幕可用工作区 screen.avai...
jQuery获取页面及个元素高度、宽度
weixin_41602101的博客
04-25 2648
获取浏览器显示区域（可视区域）的高度 ： $(window).height(); 获取浏览器显示区域（可视区域）的宽度 ： $(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 ： $(document).width(); 浏览器当前窗口文档body的高度： $(document.body).height(); 浏览器当前窗口文档...
关于JS、JQ获取可视区域的高度、宽度以及屏幕分辨率的那些事
weixin_34174105的博客
03-10 966
用JS和JQ获取相关属性 JavaScript document.body.clientWidth;//网页可见区域宽document.body.clientHeight;//网页可见区域高document.body.offsetWidth;//网页可见区域宽（包括边框的宽）document.body.offsetHeight;//网页可...
JQuery获取宽高
Jomly Kellenda的博客
11-28 332
window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高，不包括padding/border/margin b = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding c = $("#div").outerWidth()...
JavaScript/JQuery - 获取屏幕/网页宽高
尘归一尘的博客
10-24 274
JavaScript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrol...
jQuery javascript获得网页的高度与宽度的实现代码
10-22
本篇文章将介绍如何使用原生JavaScript和jQuery这两种技术来实现获取网页高度与宽度的功能。 首先，要了解的是JavaScript本身提供的DOM属性，这些属性可以直接获取与高度和宽度相关的各种信息： 1. document.body....
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
10-29
jQuery中的位置函数是用于获取或设置元素在页面或容器中的位置的关键工具，这些函数包括`offset()`, `innerWidth()`, `innerHeight()`, `outerWidth()`, `outerHeight()`, `scrollTop()`, 和 `scrollLeft()`。...
jQuery,javascript获得网页的高度和宽度$(document).height / $(window).height
tingliting的专栏
10-13 4493
一、javascript 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： doc
jquery获取元素各种宽高及页面宽高总结
weixin_34166847的博客
07-03 732
window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高，不包括padding/border/margin b = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding c = $("#div").outerWidth()...
含多类型充电桩的电动汽车充电站优化配置方法（Matlab代码实现）
01-04
含多类型充电桩的电动汽车充电站优化配置方法（Matlab代码实现）内容概要：本文围绕含多类型充电桩的电动汽车充电站优化配置方法展开，基于Matlab代码实现，旨在解决充电站中不同类型充电桩的合理配置问题，以提升充电效率、降低运营成本并满足用户需求。文中结合实际应用场景，构建数学优化模型，可能涉及目标函数设计（如最小化投资成本、最大化服务能力）、约束条件（如电力容量限制、空间布局限制）以及多类型充电桩（如快充、慢充、超
【软件工程分析报告】网络设备配置技术笔记：路由交换安全策略综合应用
01-04
内容概要：本文档是一份关于交换路由配置的学习笔记，系统地介绍了网络设备的远程管理、交换机与路由器的核心配置技术。内容涵盖Telnet、SSH、Console三种远程控制方式的配置方法；详细讲解了VLAN划分原理及Access、Trunk、Hybrid端口的工作机制，以及端口镜像、端口汇聚、端口隔离等交换技术；深入解析了STP、MSTP、RSTP生成树协议的作用与配置步骤；在路由部分，涵盖了IP地址配置、DHCP服务部署（接口池与全局池）、NAT转换（静态与动态）、静态路由、RIP与OSPF动态路由协议的配置，并介绍了策略路由和ACL访问控制列表的应用；最后简要说明了华为防火墙的安全区域划分与基本安全策略配置。; 适合人群：具备一定网络基础知识，从事网络工程、运维或相关技术岗位1-3年的技术人员，以及准备参加HCIA/CCNA等认证考试的学习者。; 使用场景及目标：①掌握企业网络中常见的交换与路由配置技能，提升实际操作能力；②理解VLAN、STP、OSPF、NAT、ACL等核心技术原理并能独立完成中小型网络搭建与调试；③通过命令示例熟悉华为设备CLI配置逻辑，为项目实施和故障排查提供参考。; 阅读建议：此笔记以实用配置为主，建议结合模拟器（如eNSP或Packet Tracer）动手实践每一条命令，对照拓扑理解数据流向，重点关注VLAN间通信、路由选择机制、安全策略控制等关键环节，并注意不同设备型号间的命令差异。
光学分析在癌症治疗与诊断中的应用.zip
最新发布
01-04
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
raml-java-parser修改版，含smal util for Cucumber进程
01-04
先展示下效果 https://pan.quark.cn/s/a4b39357ea24 RAML Java 解析器是一个分支项目，其中整合了我们用于连接 Cucumber 与 RAML 的实用工具，并且附带了一个实例。 这一构思的核心在于，通过在 Cucumber 的定义中应用服务的 displayName，能够使单元测试工具（例如 rest-assured）明确了解如何针对各个服务进行状态测试及其具体方法。
现代物流行业交通工具背景PPT模板
01-04
下载方式：https://pan.quark.cn/s/88340bbdd0a9 这是一套以交通工具为元素的，面向现代物流领域的PPT演示文稿模板，总共包含22页幻灯片。 模板的封面部分采用了多种蓝色及紫色色块进行装饰，并融合了若干物流运输工具，例如飞机、高速列车等作为视觉元素，用以构成背景设计，从而使得整个演示文稿模板与物流行业的主旨高度契合。 在内容页的设计上，模板继续运用蓝色与紫色进行色彩搭配，精心制作了20页采用扁平化设计的幻灯片图表。 此模板主要适用于构建物流行业相关的项目工作报告演示文稿。 文件存储格式为.PPTX。
JavaScript中的宽高属性解析与应用
接下来，我们将关注与宽高相关的属性： 1. **clientHeight** 和 **clientWidth**：这两个属性返回元素可视区域的高度和宽度，不包括滚动条。对于`window`对象，它们分别对应`window.innerHeight`和`window....
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值