`

js获取dom的高度与宽度(可见区域及部分等)的方法

阅读更多
今天的js教程,比较简单。
介绍用js获取dom的高度与宽度的方法。
网页可见区域宽或高、网页正文全文宽或高以及网页正文部分左或右等。

具体如下:
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth 
分享到:
评论

相关推荐

    js获取dom的高度和宽度(可见区域及部分等等)

    在进行网页设计和前端开发时,了解如何使用JavaScript获取DOM元素的高度和宽度是非常重要的。这不仅包括整个网页的可视区域,也包括网页中的正文部分,以及被用户滚动过的部分。具体来说,可以细分为以下几个方面: ...

    js常用的dom高度长度详细

    - `document.body.clientWidth` 和 `document.body.clientHeight` 分别返回浏览器窗口可见区域的宽度和高度,不包括滚动条。 - `document.body.offsetWidth` 和 `document.body.offsetHeight` 包括了边框,提供了...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar

    本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解,主要集中在JavaScript的DOM操作和窗口对象(Window)的属性与方法上。 1. **当前页面可视区域尺寸**...

    javascript获取网页高度宽度.rar

    总结,JavaScript获取网页高度和宽度的方法多种多样,可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域,理解并熟练掌握这些技术可以帮助学生更好地构建动态、...

    Javascript dom位置、大小、鼠标定位操作

    【JavaScript DOM位置、大小、鼠标定位操作】是Web开发中不可或缺的部分,JavaScript提供了丰富的属性用于操作DOM元素的位置、尺寸以及获取鼠标位置。了解并熟练掌握这些属性有助于提高开发效率和编写高质量的Web...

    js 获取页面高度和宽度兼容 ie firefox chrome等

    在探讨如何用JavaScript获取页面的高度和宽度时,我们需要考虑不同浏览器间的兼容性问题,特别是像Internet Explorer(IE)、Mozilla Firefox(火狐)和Google Chrome(谷歌)这样的主流浏览器。由于这些浏览器对DOM...

    Js操作DOM元素及获取浏览器高宽的简单方法

    `document.body.clientWidth`和`document.body.clientHeight`分别提供了网页可见区域的宽度和高度。而`document.body.offsetWidth`和`document.body.offsetHeight`则包括了元素的边框。如果需要获取整个网页文档的...

    jQuery获取页面及个元素高度、宽度的总结——超实用

    在JavaScript的世界里,jQuery库提供了一种简洁的方式来处理DOM操作,包括获取页面和元素的高度与宽度。本篇文章将深入探讨如何使用jQuery获取不同层面的高度和宽度,以及与滚动条相关的属性。 首先,我们来了解几...

    JS获取各种宽度、高度的简单介绍

    在进行Web前端开发时,经常需要通过JavaScript获取元素的尺寸信息,这包括元素的宽度和高度等,以便进行布局调整、元素定位等操作。本文档主要介绍了一些常用的用于获取对象尺寸的属性,包括scrollWidth、...

    javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    本文主要探讨了JavaScript中获取和判断浏览器窗口、屏幕以及网页高度和宽度的方法,这对于网页布局和响应式设计至关重要。在JavaScript中,有多种属性和方法可以用来获取不同维度的尺寸信息。 首先,我们关注的是...

    jQuery javascript获得网页的高度与宽度的实现代码

    在网页开发中,获取网页的高度与宽度是一项基础且重要的...以上就是文章提供的关于使用jQuery和原生JavaScript获取网页的高度和宽度的实现代码和相关知识点。掌握这些知识能够帮助开发者更好地进行网页设计和开发工作。

    js getBoundingClientRect使用方法详解.docx

    该方法返回一个 DOMRect 对象,该对象包含了元素的宽度、高度、left、top、right、bottom 等属性值。这些属性值可以帮助开发者更好地控制和计算元素在页面上的位置。 在使用 getBoundingClientRect 方法时,需要...

    JS实现根据详细地址获取经纬度功能示例

    - 使用div容器设置了地图的显示区域,通过CSS设置了地图容器的宽度、高度和位置等样式属性。 3. **地图实例化及配置**: - 通过BMap.Map构造函数创建了一个地图实例,并通过容器id将其与DOM元素关联。 - 设置...

    js获取浏览器宽和高http://www.tiki-toki.com/

    在JavaScript中获取浏览器的宽度和高度是Web开发中常见的需求,这主要涉及到DOM(文档对象模型)和浏览器窗口对象的知识。这篇博客“js获取浏览器宽和高”可能详细阐述了如何利用JavaScript来获取这些信息。虽然提供...

    按高度进行分页代码

    `window.onload`函数在页面完全加载后执行,计算`frameContent`的`scrollHeight`(总高度,包括不可见部分)除以`offsetHeight`(可见部分高度),向上取整得到总页数。然后,通过`for`循环创建分页链接,并添加“上...

    JQuery获取浏览器窗口内容部分高度的代码

    我们通常关注的是“视口”高度,也就是用户可见区域的高度。 JQuery是一个非常流行的JavaScript库,它简化了JavaScript编程,特别是在DOM操作、事件处理和AJAX交互等方面。JQuery中的window对象是一个全局对象,它...

    前端工程师笔试面试题

    3. 浏览器可见区域的获取:可以使用 JavaScript 来获取浏览器的可见区域的高度和宽度,例如使用 `document.documentElement.scrollWidth` 和 `document.documentElement.scrollHeight` 来获取浏览器的可见宽度和高度...

    JS中位置与大小的获取方法

    总体来说,JavaScript提供了丰富的方法来获取DOM元素的尺寸和位置信息,合理使用这些方法能够帮助我们在开发中更好地布局和设计页面。通过本文档所提供的方法和示例,我们可以有效地掌握如何在项目中应用这些技术。

    原生JS获取元素的位置与尺寸实现方法

    原生JavaScript(JS)是Web开发中不可或缺的一部分,它允许开发者在不依赖任何外部库或框架的情况下,通过JavaScript代码直接操作DOM(文档对象模型),从而获取页面中元素的位置和尺寸信息。掌握如何使用原生JS来...

Global site tag (gtag.js) - Google Analytics