`

jQuery,javascript获得网页的高度和宽度(转)

阅读更多
网页可见区域宽: 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

jquery

获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width();
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :$(document).width();

获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

计算元素位置和偏移量
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo  指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll  是否把 滚动条计算在内,默认TRUE
options.padding  是否把padding计算在内,默认false
options.margin   是否把margin计算在内,默认true
options.border  是否把边框计算在内,默认true
分享到:
评论

相关推荐

    jQuery 获取屏幕高度和宽度

    本文将详细讲解如何使用jQuery获取屏幕的高度和宽度,这对于创建响应式网页设计或者根据屏幕尺寸调整元素布局至关重要。 首先,我们需要了解什么是屏幕高度和宽度。屏幕高度是指浏览器窗口可视区域的垂直尺寸,而...

    jquery实现动态改变div宽度和高度

    本文将介绍如何使用jQuery来实现动态改变div的宽度和高度。jQuery作为一个快速、小巧、功能丰富的JavaScript库,极大地简化了对DOM的操作,使得修改元素尺寸变得非常简单。 首先,要实现动态改变div的尺寸,我们先...

    javascript原生和jquery库实现iframe自适应高度和宽度.doc

    javascript原生和jquery库实现iframe自适应高度和宽度.doc

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

    本篇文章将介绍如何使用原生JavaScript和jQuery这两种技术来实现获取网页高度与宽度的功能。 首先,要了解的是JavaScript本身提供的DOM属性,这些属性可以直接获取与高度和宽度相关的各种信息: 1. document.body....

    【Jquery经典特效18】jQuery自适应宽度跟高度相册代码

    在本文中,我们将深入探讨如何使用jQuery实现一个自适应宽度和高度的相册代码,这是Jquery经典特效系列中的第18个主题。这个特效对于现代网页设计至关重要,因为它允许图片展示在不同屏幕尺寸和设备上都能保持良好的...

    jQuery自适应父容器宽度高度代码

    在网页设计中,让元素自适应其父容器的宽度和高度是常见的需求,尤其是在响应式设计中。jQuery作为JavaScript库,提供了丰富的功能来处理这样的任务。"jQuery自适应父容器宽度高度代码"就是一个实例,它利用jQuery...

    iframe根据页面内容自适应高度和宽度

    2. **JavaScript**:使用JavaScript来动态获取`iframe`的内容高度和宽度。可以监听`load`事件,当`iframe`加载完成后,通过`contentWindow`和`contentDocument`属性获取内容的尺寸,然后调整`iframe`的大小。例如: ...

    jQuery自适应宽度跟高度相册代码

    在jQuery中,我们通常使用$(window).resize()函数监听窗口大小的变化,然后通过CSS或者JavaScript动态计算并设置元素的宽度和高度,确保元素始终占据适当的空间。例如: ```javascript $(window).resize(function()...

    javascript原生和jquery库实现iframe自适应高度和宽度

    关于实现iframe自适应高度和宽度的内容,可以使用原生JavaScript和jQuery库两种方式来完成。下面将详细解释使用这两种技术的实现方法及代码示例。 ### 使用原生JavaScript实现iframe自适应高度和宽度 要使用原生...

    JS,Jquery获取各种屏幕的宽度和高度

    ### JS与jQuery获取屏幕宽度和高度的相关知识点 在前端开发中,经常需要获取用户的屏幕尺寸信息,例如宽度和高度等,这些数据对于响应式设计、布局调整等方面具有重要作用。通过JavaScript(简称JS)和jQuery这两种...

    jQuery自适应宽度跟高度相册代码.zip

    在JavaScript部分,jQuery提供了一系列的方法来获取和改变元素的属性,如宽度和高度。当窗口大小发生变化时,通过`$(window).resize()`函数监听窗口大小的变化,并根据新的窗口宽度调整相册的布局。同时,`$...

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

    在JavaScript中,获取当前页面...以上是关于“javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数”的主要知识点,通过学习和理解这些内容,开发者可以更好地控制和适应网页在不同设备和窗口大小下的表现。

    使用JavaScript JQuery实现网页翻屏.pdf

    在本文中,我们将讨论如何使用JavaScript和JQuery实现网页翻屏功能。JavaScript是一种面向对象、解释型的高级语言,广泛用于Web页面客户端脚本语言,为网页增加动态功能和效果。JQuery是一个JavaScript库,它极大...

    jQuery JavaScript库.zip

    学习和掌握jQuery,不仅可以提高开发效率,还能让网页的交互性和用户体验得到显著提升。通过深入理解其核心概念并实践相关示例,开发者可以快速成为jQuery的熟练使用者。这个压缩包提供了一个良好的起点,无论是对于...

    jquery对iframe自适应高度插件

    然而,`iframe`的默认高度和宽度可能并不适合所有情况,特别是当内容动态变化时,可能会导致滚动条的出现或内容被截断。为了解决这个问题,`jQuery`提供了一个专门的插件——"jquery对iframe自适应高度插件"。 这个...

    jQuery自适应父容器宽度高度代码.zip

    总的来说,这个压缩包提供了一个基于jQuery的解决方案,使得网页元素可以自动调整大小以适应其父容器的宽度和高度变化。这在响应式设计和移动优先的开发策略中尤其有用,确保了在不同设备和屏幕尺寸上的良好用户体验...

    jquery 得到当前页面高度和宽度的两个函数

    在网页开发中,获取当前页面的高度和宽度是常见的需求,特别是在进行页面布局或者动态调整元素尺寸时。在jQuery库中,虽然没有直接提供获取页面高度和宽度的内置方法,但可以通过编写自定义函数来实现这一功能。这里...

Global site tag (gtag.js) - Google Analytics