`

js实现高度的获取 位置函数

阅读更多

参考: js取高度

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

$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})

位置函数

 

1.offset()
获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
2.innerWidth()
获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。返回值:整型数据
3.innerHeight()
获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。返回值:整型数据
4.outerWidth()
 获取第一个匹配元素外部宽度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。返回值:整型数据
5.outerHeight()
获取第一个匹配元素外部高度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。返回值:整型数据
6.scrollTop()
获取匹配元素相对滚动条顶部的偏移。
7.scrollLeft()
获取匹配元素相对滚动条左侧的偏移
转:http://blog.csdn.net/abeetle/article/details/30462851
分享到:
评论

相关推荐

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

    以下是一些相关的JavaScript函数,用于获取这些信息: 1. **getHeight() 函数**:这个函数的主要目的是计算当前页面可视区域的高度。它首先尝试使用 `window.innerHeight` 和 `window.scrollMaxY` 来获取高度,这是...

    js中获取相对位置

    ### JavaScript 获取元素相对位置 在Web开发中,我们经常需要获取页面中某个元素相对于浏览器窗口的位置,例如在设计响应式布局、实现动态效果时。本文将详细介绍如何利用JavaScript来实现这一功能。 #### 标题:...

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

    通过以上知识点,开发者可以了解如何使用JavaScript和百度地图API来实现地址转经纬度的功能,并且可以通过百度地图的本地搜索功能获取到准确的地理位置信息。这个功能不仅适用于独立的地理位置查询服务,也可以嵌入...

    javascript获取滚动条高度 页面宽度与高度

    ### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...

    js实现获取div坐标的方法

    函数返回一个对象,其中包含了六个属性,分别是:元素自身的宽度(`width`),元素自身的高度(`height`),元素相对于页面(或父元素)左边界的坐标(`x`或`left`),元素相对于页面(或父元素)上边界的坐标(`y`...

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

    JavaScript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数 在Web开发中,获取当前页面的可视高度和宽度,以及浏览器的宽度和高度是非常重要的。这篇文章将为大家讲解如何使用JavaScript来获取这些信息。 ...

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    例如,以下是一个使用jQuery库的JavaScript函数,用以获取隐藏元素的尺寸: ```javascript function getDefaultStyle(obj, attribute) { return obj.currentStyle ? obj.currentStyle[attribute] : document....

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

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

    用JavaScript绘图 ——JS2D函数集

    本文将深入探讨JavaScript的2D绘图功能,即JS2D函数集,帮助开发者掌握如何利用JavaScript在浏览器中绘制出丰富多彩的图形。 在HTML5中,Canvas元素的引入为JavaScript提供了一个强大的2D渲染上下文。通过...

    使用JS+CSS实现DIV层自适应高度和宽度

    我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。这些知识点将帮助我们更好地实现网页的自适应设计。

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

    ### JavaScript 获取当前页面可视高度和宽度以及浏览器宽度和高度的函数 #### 一、概述 在Web开发过程中,经常需要获取当前页面可视区域的高度和宽度,以及整个浏览器窗口的尺寸。这些信息对于响应式设计、页面...

    js实现iframe自适应高度

    本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案,确保在各种主流浏览器中都能正常工作。 首先,理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性,用于指定要加载的...

    JAVASCRIPT让IFRAME框架的高度自适应

    我们可以定义一个函数来获取子IFRAME框架的高度,然后将其设置为table元素的高度,以便子IFRAME框架的高度能够正确地自动调整。 通过使用JavaScript来让IFRAME框架的高度自适应,我们可以实现IFRAME框架的高度自动...

    js获取页面控件坐标.pdf

    JS 获取页面控件坐标 在 HTML 文档中,获取页面控件坐标是非常重要的,特别是在进行交互式开发时。今天,我们将讨论如何使用 JavaScript 获取页面控件坐标。 在 HTML 文档中,每个元素都有其自己的坐标系,通过...

    Javascript 获取页面高度(多种浏览器)

    本文将深入探讨如何使用 JavaScript 在不同浏览器中获取页面高度。 首先,我们有两个基本属性可以用来获取页面的宽度和高度:`document.body.clientWidth` 和 `document.body.clientHeight`。这两个属性分别返回 `...

    iFream自动获取高度

    为了实现iframe自动获取高度的功能,我们需要使用JavaScript来动态地改变iframe的高度。主要涉及以下技术点: - **访问DOM元素**:使用`document.getElementById()`或`document.querySelector()`等方法选择DOM元素...

    iframe 自适高度 JS控制代码实现

    ### iframe自适应高度JS控制代码实现 #### 概述 在网页开发中,经常会遇到需要让`iframe`元素根据其内部加载的内容自适应高度的需求。这样可以使得网页布局更加合理,用户体验更佳。本文将详细介绍如何通过...

    Javascript 获取滚动条位置等信息的函数

    函数返回一个对象,包含了顶部(`t`)、左边(`l`)的滚动位置以及窗口宽度(`w`)和高度(`h`)。 ```javascript function getScroll() { var t, l, w, h; if (document.documentElement && document.documentElement....

Global site tag (gtag.js) - Google Analytics