【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 获取网页宽高的方法,并对比不同浏览器下的表现。 1. `document.body.clientWidth` 和 `document.body.clientHeight` 这两个属性分别返回网页可见区域的宽度和高度,不包括滚动...
不同的浏览器和不同的元素有着不同的属性可以用来获取宽高,本文就来汇总介绍javascript中获取网页宽高的方法。 首先,我们可以通过对document.body的各种属性进行访问来获取页面的宽高信息: - document.body....
总之,理解不同浏览器和模式下的网页宽高获取方式,以及编写兼容性代码,是JavaScript开发中的必备技能。通过合理的封装和条件判断,我们可以确保在各种环境下都能正确地获取到网页的尺寸信息,为用户提供一致的浏览...
效果描述: 目前我们常用的获取图片实际宽度高度的方法,要么是在DOM中写入,要么就是等图片加载... 1、在你的网页中引入lanren.js文件 2、示例中有一个获取图片尺寸的方法,将其中的图片url地址换成你的即可
网页正文的宽高通常指的是包含所有内容(包括溢出部分)的实际宽度和高度。这对于动态调整布局或者制作某些特殊效果非常有用。 - **document.body.offsetWidth**: 获取的是网页正文的宽度,包括元素的边框、内边距...
本篇文章将详细介绍如何使用JavaScript获取网页的可见区域高度、屏幕分辨率的高度、屏幕可用工作区高度以及浏览器窗口的高度。 首先,我们来看一下网页可见区域的高度和宽度。这部分是指用户当前可以看到的页面区域...
`document.body.offsetWidth` 可以获取网页可见区域的宽度,包括边线的宽,`document.body.offsetHeight` 可以获取网页可见区域的高度,包括边线的高。 2. 使用 `document.documentElement` 对象: 在 IE 中,`...
这篇博客“js获取浏览器宽和高”可能详细阐述了如何利用JavaScript来获取这些信息。虽然提供的链接指向了一个错误的地址,但我们可以根据通常的方法来解释这个过程。 1. **浏览器窗口对象**: 在JavaScript中,`...
### 获取页面元素实际宽高的属性使用详解 在前端开发中,了解如何准确地获取页面元素的实际宽高是非常重要的。这不仅有助于我们优化页面布局,还能提高用户体验。本文将详细介绍`clientWidth`、`clientHeight`、`...
### JavaScript 获取窗口属性值 在Web开发中,JavaScript是一种广泛使用的编程语言,它能够与HTML和CSS紧密结合,为网页提供动态交互能力。其中一项常见需求是获取浏览器窗口的各种属性值,比如宽度、高度等,这...
* `document.body.offsetWidth`: 获取网页可见区域的宽度(包括边线的宽)。 * `document.body.offsetHeight`: 获取网页可见区域的高度(包括边线的高)。 * `document.body.scrollWidth`: 获取网页正文全文的宽度。...
在Web开发中,了解如何动态获取浏览器或页面容器的宽高是至关重要的,这有助于创建响应式布局、自适应滚动条以及精确的元素定位。下面我们将深入探讨这些知识点,并通过实例演示其用法。 1. **网页可见区域尺寸** ...
在JavaScript和jQuery中,获取元素的宽高是常见的操作,特别是在布局和动态调整元素尺寸时。这篇文章主要讨论原生JavaScript和jQuery中获取宽度的方法,并进行对比分析。 在原生JavaScript中,有两个主要的方法用于...
在JavaScript中,实现图片的等比例缩放以保持不失真是一项常见的需求,特别是在网页设计和动态展示中。这里我们将深入探讨如何实现这一功能,并解决图片在切换时保持正确比例的问题。 首先,我们要明白图片不失真的...
本文将详细讲解如何使用JavaScript获取图片的实际宽高,并实现根据图片大小进行自适应的解决方案。 首先,我们需要理解为什么不能直接通过CSS来获取图片的实际宽高。通常,图片在加载时其尺寸信息并未立即可用,...
我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。这些知识点将帮助我们更好地实现网页的自适应设计。
总之,通过JavaScript获取网页属性的相关知识点,不仅包括了各个具体属性的使用方法和所代表的意义,也涵盖了如何结合这些属性来解决实际问题的能力。对于前端开发者来说,掌握这些技术是必须的,它有助于提升代码的...