`

js获取网页宽高

阅读更多
【1问题】 js怎么获取页面的宽高等要素。
【2问题】 当页面大小变化时页面元素怎么随之变化。
【3示例】代码示例:(附件中含完整示例)
function gets(){
var s ="网页可见区域宽:"+ document.body.clientWidth; 
s += "<br>网页可见区域高:" + document.body.clientHeight; 
s += "<br>网页可见区域宽:" + document.body.offsetWidth +" (包括边线的宽)"; 
s += "<br>网页可见区域高:" + document.body.offsetHeight +" (包括边线的宽)"; 
s += "<br>网页正文全文宽:" + document.body.scrollWidth; 
s += "<br>网页正文全文高:" + document.body.scrollHeight; 
s += "<br>网页被卷去的高:" + document.body.scrollTop; 
s += "<br>网页被卷去的左:" + document.body.scrollLeft; 
s += "<br>网页正文部分上:" + window.screenTop; 
s += "<br>网页正文部分左:" + window.screenLeft; 
s += "<br>屏幕分辨率的宽:" + window.screen.width; 
s += "<br>屏幕分辨率的高:" + window.screen.height; 
s += "<br>屏幕可用工作区宽度:" + window.screen.availWidth; 
s += "<br>屏幕可用工作区高度:" + window.screen.availHeight;
document.getElementById('mydiv').innerHTML = s;
}
window.onresize=gets;

【4结论】
获取页面的宽高可用body.clientWidth,body.clientHeight等代码获取

当页面大小变化时,html标签中有一部分可以随之变化,比如:center。用js代码控制页面元素大小,比如此页面中的:window.onresize=gets;
分享到:
评论

相关推荐

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

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

    javascript获取网页宽高方法汇总

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

    【JavaScript源代码】JavaScript获取网页的宽高及如何兼容详解.docx

    总之,理解不同浏览器和模式下的网页宽高获取方式,以及编写兼容性代码,是JavaScript开发中的必备技能。通过合理的封装和条件判断,我们可以确保在各种环境下都能正确地获取到网页的尺寸信息,为用户提供一致的浏览...

    在图片加载完毕前js获取图片长宽尺寸

    效果描述: 目前我们常用的获取图片实际宽度高度的方法,要么是在DOM中写入,要么就是等图片加载... 1、在你的网页中引入lanren.js文件 2、示例中有一个获取图片尺寸的方法,将其中的图片url地址换成你的即可

    javascript获取页面各种高度

    网页正文的宽高通常指的是包含所有内容(包括溢出部分)的实际宽度和高度。这对于动态调整布局或者制作某些特殊效果非常有用。 - **document.body.offsetWidth**: 获取的是网页正文的宽度,包括元素的边框、内边距...

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

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

    js获取文本框的值!js获取浏览器高度和宽度值.pdf

    `document.body.offsetWidth` 可以获取网页可见区域的宽度,包括边线的宽,`document.body.offsetHeight` 可以获取网页可见区域的高度,包括边线的高。 2. 使用 `document.documentElement` 对象: 在 IE 中,`...

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

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

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

    这篇博客“js获取浏览器宽和高”可能详细阐述了如何利用JavaScript来获取这些信息。虽然提供的链接指向了一个错误的地址,但我们可以根据通常的方法来解释这个过程。 1. **浏览器窗口对象**: 在JavaScript中,`...

    获取页面元素实际宽高的属性的使用

    ### 获取页面元素实际宽高的属性使用详解 在前端开发中,了解如何准确地获取页面元素的实际宽高是非常重要的。这不仅有助于我们优化页面布局,还能提高用户体验。本文将详细介绍`clientWidth`、`clientHeight`、`...

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

    * `document.body.offsetWidth`: 获取网页可见区域的宽度(包括边线的宽)。 * `document.body.offsetHeight`: 获取网页可见区域的高度(包括边线的高)。 * `document.body.scrollWidth`: 获取网页正文全文的宽度。...

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

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

    javascript获取窗口属性值

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

    js控制图片缩放 不失真 获取图片真实长和宽

    在JavaScript中,实现图片的等比例缩放以保持不失真是一项常见的需求,特别是在网页设计和动态展示中。这里我们将深入探讨如何实现这一功能,并解决图片在切换时保持正确比例的问题。 首先,我们要明白图片不失真的...

    原生js获取宽高与jquery获取宽高的方法关系对比

    在JavaScript和jQuery中,获取元素的宽高是常见的操作,特别是在布局和动态调整元素尺寸时。这篇文章主要讨论原生JavaScript和jQuery中获取宽度的方法,并进行对比分析。 在原生JavaScript中,有两个主要的方法用于...

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

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

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

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

Global site tag (gtag.js) - Google Analytics