网页可见区域宽: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均无关)
网页可见区域宽: 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
-------------------
技术要点
本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。
要 得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要 深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度
分享到:
相关推荐
在当今互联网环境中,随着智能设备的多样化,网页必须能够适应各种屏幕大小,以保证用户体验的一致性和优化。适配不同的屏幕大小,也被称为响应式设计,是前端开发中的一项核心技能。本文着重介绍了如何使用...
在3D图形编程中,Three.js是一个非常流行的JavaScript库,用于在Web浏览器中创建和展示三维模型和场景。本教程将深入探讨如何在Three.js环境中将3D坐标转换为2D(平面)坐标,以便在网页上的div元素或其他2D元素上...
### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...
在网页设计中,为了提供优秀的用户体验,让网页内容能够适应不同设备和屏幕尺寸的变化,我们需要实现根据浏览器屏幕大小高度自适应的功能。这涉及到几个关键概念和技术,包括`height`、`clientHeight`以及`onresize`...
在jQuery Mobile框架中,开发移动应用时,确保图片能够自适应不同手机屏幕大小是一项关键任务。这不仅可以提高用户体验,还能确保应用在各种设备上显示得美观且功能正常。标题和描述提到的问题,主要关注如何利用...
在构建现代网页时,尤其是针对手机网站,设计一个自适应屏幕大小的轮播幻灯片是至关重要的。这种功能能够确保无论用户使用何种设备访问,都能获得良好的视觉体验。"手机网站轮播幻灯自适应屏幕大小"这个主题涵盖了几...
在ASP.NET开发中,创建响应式布局是必不可少的技能,特别是在构建Web应用程序时,需要确保用户在不同设备和屏幕尺寸上都能获得良好的体验。标题提到的"asp.net 控件随着窗口大小按比例变化源码"就是一个典型的响应式...
《jQuery文字大小自适应屏幕:实现与应用》 在当今的网页设计中,用户体验占据了至关重要的地位,其中,文字的可读性是评判一个网站质量的重要标准之一。当用户使用不同设备或调整浏览器窗口大小时,文字大小的...
"可传递参数,根据参数自适应屏幕大小比例,可拖拽"的标题所描述的功能,是一种高级的交互设计技术,它允许开发者通过传递参数来调整元素的显示大小,以适应各种屏幕分辨率,同时提供拖拽功能,增强用户体验。...
使用JavaScript(JS)可以轻松实现这一功能,本文将详细介绍实现方法并解释相关概念。 首先,了解一些基本的HTML和CSS概念是必要的。在HTML文档中,`<body>`标签代表网页的主要内容区域,而CSS中的`margin`属性定义...
在JavaScript中,获取屏幕与浏览器窗口的尺寸是前端开发中常用的一个功能,这些尺寸信息能够帮助开发者更好地适配不同设备的显示效果,实现响应式设计。以下是对标题、描述及部分代码示例中的知识点进行详细解析。 ...
### JavaScript 获取当前窗口的所有大小值 在Web开发中,经常需要获取浏览器窗口或者特定元素的尺寸信息,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取当前窗口的各种...
9. **响应式设计**:为了适应不同设备和屏幕尺寸,转盘的布局和大小可能需要根据窗口大小进行调整。可以使用媒体查询(`media queries`)或CSS Flexbox和Grid布局来实现响应式设计。 10. **可维护性和扩展性**:...
为了优化代码和提高性能,可以考虑使用CSS媒体查询(`media queries`)配合`rem`单位,为不同屏幕尺寸预设字体大小,同时保留JavaScript作为备用方案,以覆盖那些媒体查询无法处理的情况。 最后,文章提到了...
我们可以获取`screen.width`和`screen.height`来得到屏幕的物理像素尺寸。同时,`screen.availWidth`和`screen.availHeight`则分别表示可用的屏幕宽度和高度,不包括任务栏或其他非可视部分。 2. `window....
23、原生JavaScript光标停在文字的后面,文本框获得焦点时调用 24、原生JavaScript检验URL链接是否有效 28、原生JavaScript IP转成整型 29、原生JavaScript整型解析为IP地址 31、原生JavaScript判断是否移动设备 32...
为获得正确的鼠标位置,可以使用`AspectUtility.mousePosition`来进行校正。这个属性会根据当前的纵横比调整输入的鼠标位置,从而确保在GUI交互时的位置准确性。 `AspectUtility`类需要附加到主相机(通过查找标记...
通过将屏幕分辨率除以这个参考宽度,我们可以得到屏幕的物理尺寸(以厘米为单位)。 注意,由于不同的显示器像素密度(DPI)不同,将像素值转换为物理尺寸可能不是完全准确的。这里我们简单地假设1厘米等于固定数量...
在现代Web开发中,前端JavaScript库扮演着至关重要的角色,特别是在构建响应式和适应各种设备的网站时。本文将深入探讨“前端JS库,适合所有手机屏幕尺寸”的主题,特别是针对移动设备的优化,以及与淘宝网站历史...