`
gbk2312
  • 浏览: 7849 次
  • 性别: Icon_minigender_1
  • 来自: 衡阳
文章分类
社区版块
存档分类
最新评论

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


HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

 

记录提醒自己!!

分享到:
评论

相关推荐

    js获取网页宽高

    在JavaScript编程中,获取网页的宽高是一项常见的需求,特别是在页面布局、动态调整元素尺寸或者进行响应式设计时。本文将深入探讨如何利用JavaScript来获取浏览器窗口以及网页内容的宽度和高度。 首先,我们需要...

    javascript获取网页宽高方法汇总.docx

    本文将详细介绍几种使用 JavaScript 获取网页宽高的方法,并对比不同浏览器下的表现。 1. `document.body.clientWidth` 和 `document.body.clientHeight` 这两个属性分别返回网页可见区域的宽度和高度,不包括滚动...

    javascript获取页面各种高度

    在JavaScript编程语言中,开发者经常需要获取与网页和屏幕尺寸相关的数据,比如页面的可视区域、文档的实际大小以及用户屏幕的有效工作区等信息。这些数据对于优化网站布局、响应式设计以及实现某些交互功能至关重要...

    js 获取屏幕各种宽高的方法(浏览器兼容)

    在Web开发中,获取屏幕和网页元素的各种宽高信息是常见的需求,以便进行页面布局、元素定位和动态调整等操作。JavaScript为此提供了丰富的接口,但不同的浏览器对这些接口的支持度有所差异,这就要求开发者编写兼容...

    javascript获取网页宽高方法汇总

    不同的浏览器和不同的元素有着不同的属性可以用来获取宽高,本文就来汇总介绍javascript中获取网页宽高的方法。 首先,我们可以通过对document.body的各种属性进行访问来获取页面的宽高信息: - document.body....

    js获取网页高度(详细整理)

    本篇文章将详细介绍如何使用JavaScript获取网页的可见区域高度、屏幕分辨率的高度、屏幕可用工作区高度以及浏览器窗口的高度。 首先,我们来看一下网页可见区域的高度和宽度。这部分是指用户当前可以看到的页面区域...

    js获取浏览器和屏幕的各种宽度高度

    接下来,我们介绍如何获取网页正文的全文宽高,也就是网页内容的实际高度和宽度。这可以通过获取元素的scrollWidth和scrollHeight属性来实现。scrollWidth代表元素的总宽度,scrollHeight代表元素的总高度。对于现代...

    javascript获取窗口属性值

    在Web开发中,JavaScript是一种广泛使用的编程语言,它能够与HTML和CSS紧密结合,为网页提供动态交互能力。其中一项常见需求是获取浏览器窗口的各种属性值,比如宽度、高度等,这对于响应式设计或某些特定功能(如...

    JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...

    JS 获取浏览器和屏幕宽高等信息代码

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...

    js 获取浏览器高度和宽度值(多浏览器)

    * `window.screen.availHeight`: 获取屏幕可用工作区的高度。 * `window.screen.availWidth`: 获取屏幕可用工作区的宽度。 HTML 精确定位 在 HTML 中,还有一些属性可以用来获取对象的高度和宽度值。 * `...

    JS获取图片实际宽高及根据图片大小进行自适应

    本文将详细讲解如何使用JavaScript获取图片的实际宽高,并实现根据图片大小进行自适应的解决方案。 首先,我们需要理解为什么不能直接通过CSS来获取图片的实际宽高。通常,图片在加载时其尺寸信息并未立即可用,...

    JS获取当前网页大小以及屏幕分辨率等

    获取当前对象大小以及屏幕分辨率等</title> <body> [removed] var s = ; s += 网页可见区域宽:+ document.body.clientWidth+ ; s += 网页可见区域高:+ document.body.clientHeight+ ; s +

    Node.js-node端基于phantomjs的屏幕截取服务

    在这个项目中,开发者利用Node.js作为后端服务器平台,通过集成PhantomJS库来实现网页的无头浏览器屏幕截图功能。下面将详细介绍这两个关键技术和如何在Node.js中实现这一服务。 **Node.js** Node.js是一个开放源...

    详解js动态获取浏览器或页面等容器的宽高

    在Web开发中,了解如何动态获取浏览器或页面容器的宽高是至关重要的,这有助于创建响应式布局、自适应滚动条以及精确的元素定位。下面我们将深入探讨这些知识点,并通过实例演示其用法。 1. **网页可见区域尺寸** ...

    通过JAVAScript实现页面自适应.doc

    页面自适应的实现原理是通过 JavaScript 获取屏幕的宽高,然后根据屏幕大小调整页面元素的宽高和位置。首先,需要获取屏幕的宽高,可以使用 `document.body.offsetHeight` 和 `document.body.offsetWidth` 获取当前...

    JS根据浏览器窗口大小实时动态改变网页文字大小的方法

    首先,我们需要了解浏览器窗口的宽高是可以通过JavaScript对象属性获取的。在脚本中,我们通常使用document对象的documentElement属性来获取整个HTML文档的根元素,进一步通过offsetWidth属性获取当前浏览器窗口的...

    JS获取网页属性包括宽、高等等

    总之,通过JavaScript获取网页属性的相关知识点,不仅包括了各个具体属性的使用方法和所代表的意义,也涵盖了如何结合这些属性来解决实际问题的能力。对于前端开发者来说,掌握这些技术是必须的,它有助于提升代码的...

    JavaScript获取网页、浏览器、屏幕高度和宽度汇总

    在JavaScript中,获取网页、浏览器和屏幕的高度与宽度是常见的需求,这主要涉及到网页布局、动态效果以及响应式设计。以下是一些关键方法的详细解释: 1. **网页可见区域宽高** - `document.body.clientWidth`:...

Global site tag (gtag.js) - Google Analytics