Javascript获得屏幕、浏览器宽高
热5已有 152 次阅读 2009-12-01 17:21 标签: 浏览器 Javascript 屏幕
网页可见区域宽: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均无关)
分享到:
相关推荐
本文将详细介绍几种使用 JavaScript 获取网页宽高的方法,并对比不同浏览器下的表现。 1. `document.body.clientWidth` 和 `document.body.clientHeight` 这两个属性分别返回网页可见区域的宽度和高度,不包括滚动...
64、原生JavaScript获得URL中GET参数值 65、原生JavaScript实现全选通用方法 66、原生JavaScript实现全部取消选择通用方法 67、原生JavaScript实现打开一个窗体通用方法 68、原生JavaScript判断是否为客户端设备 69...
- 使用 `window.innerWidth` 和 `window.innerHeight` 来获取浏览器窗口的可视区域尺寸,这两个属性在现代浏览器中都得到了很好的支持。 - 在处理旧版浏览器或兼容性问题时,可以使用 `document.documentElement....
首先,我们来介绍获取浏览器窗口的可见区域宽高。可见区域指的是不包含浏览器工具栏和滚动条的窗口实际显示区域的大小。对于现代浏览器(IE9+、Chrome、Firefox、Opera、Safari),可以使用window对象的innerWidth和...
不同的浏览器和不同的元素有着不同的属性可以用来获取宽高,本文就来汇总介绍javascript中获取网页宽高的方法。 首先,我们可以通过对document.body的各种属性进行访问来获取页面的宽高信息: - document.body....
为保持图片的原始宽高比,我们可以使用`height: auto`,这样当宽度改变时,高度会自动调整以保持原始的比例。 对于浏览器兼容性问题,CSS3的一些新特性可能在较旧的浏览器中不受支持。为了确保图片适应策略在所有...
该代码的主要目标是创建一个类似Flickr和Google+的图片画廊效果,它能够让图片在不同浏览器窗口大小下保持良好的显示效果,同时保证所有图片具有统一的高度,图片自身的宽高比得以保留。这种布局方式可以确保图片...
在JavaScript中,获取浏览器窗口的大小是一个常见的需求,这通常涉及到网页的响应式设计或动态布局。`window.innerWidth`和`window.innerHeight`是JavaScript提供的两个内置属性,它们分别用于获取浏览器视口的宽度...
这里使用 `Math.min()` 函数取两者中的最小值,这样可以在大多数浏览器中得到正确的高度。 然而,为了确保更好的兼容性和遵循W3C标准,我们在HTML文档开头添加了`<!DOCTYPE>`声明,如`<!DOCTYPE html>`。这将让...
其布局引擎Trident通过计算元素的宽高、边距和边框,确定元素在页面中的位置。值得注意的是,IE5.X的盒模型存在差异,内容区域(content)的宽度不包含边框和内填充,这在后续版本中进行了修正。 四、JavaScript...
通过JavaScript,我们可以轻松地获取浏览器窗口的尺寸和页面元素的尺寸,进而实现动态布局和适配不同的设备屏幕。 ### 获取浏览器窗口尺寸的方法: 1. **document.body.clientWidth** - 描述:返回当前页面的可视...
4. **CSS操作**: Origamid效果通常涉及到元素的样式变化,因此需要使用JavaScript操作CSS属性,如`style`对象或`getComputedStyle`函数来动态改变元素的宽高、颜色、透明度等。 5. **动画与定时器**:要创建折纸...
11. **屏幕分辨率的高**:`window.screen.height` 屏幕的物理高度。 12. **屏幕分辨率的宽**:`window.screen.width` 屏幕的物理宽度。 13. **屏幕可用工作区高度**:`window.screen.availHeight` 用户可用的屏幕...
随着移动设备的普及和屏幕尺寸的多样化,网站需要具备良好的响应性,即能够根据不同设备的屏幕尺寸自动调整布局和元素尺寸。对于iframe而言,这意味着需要一种机制使其能够根据内部内容的变化或者外部容器的尺寸变化...
2. **CSS样式**:设置基本样式,如容器的宽高比、内边距等,以及图片的相对定位,以便于后续的jQuery操作。 3. **jQuery加载**:在文档加载完成后,使用jQuery的`.ready()`函数初始化布局。获取容器元素的宽度,...
然后,根据浏览器窗口的尺寸设置画布的宽度和高度,以便适应不同屏幕大小。这一步至关重要,因为代码雨的效果需要在整个画布上呈现。 为了实现代码雨效果,我们需要考虑以下关键知识点: 1. 字体大小和行宽计算:...
这种设计可以充分利用屏幕空间,提高内容的视觉冲击力,使用户获得更好的浏览体验。 3. **幻灯片切换**:幻灯片切换是一种常见的网页交互元素,用于展示一系列内容,如图片、文本或视频,通过定时自动切换或用户...
模板的“宽屏”特性意味着它设计时考虑了大屏幕设备,如桌面电脑和高分辨率的平板,通常采用16:9或更宽的屏幕比例,以展现更多的内容并创造更开阔的视觉效果。这通常涉及到响应式设计,通过媒体查询(media queries...
这种自适应能力是响应式网页设计的重要组成部分,确保无论用户使用何种设备浏览,都能获得一致且舒适的视觉体验。"效果不错"暗示了该代码实现了良好的动画过渡效果,既流畅又吸引人,增强了网站的专业感和现代感。 ...
同时,考虑到SEO(搜索引擎优化),模板可能也遵循了良好的编码实践,以帮助网站在搜索结果中获得更高的排名。 总的来说,"白色简洁线条宽屏自适应html5模板5583.zip"提供了一个现代、多功能且易于定制的网页设计...