`
feiyu86
  • 浏览: 21311 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Javascript获得屏幕、浏览器宽高

阅读更多
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获取网页宽高方法汇总.docx

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

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    64、原生JavaScript获得URL中GET参数值 65、原生JavaScript实现全选通用方法 66、原生JavaScript实现全部取消选择通用方法 67、原生JavaScript实现打开一个窗体通用方法 68、原生JavaScript判断是否为客户端设备 69...

    关于获取各种浏览器可见窗口大小

    - 使用 `window.innerWidth` 和 `window.innerHeight` 来获取浏览器窗口的可视区域尺寸,这两个属性在现代浏览器中都得到了很好的支持。 - 在处理旧版浏览器或兼容性问题时,可以使用 `document.documentElement....

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

    首先,我们来介绍获取浏览器窗口的可见区域宽高。可见区域指的是不包含浏览器工具栏和滚动条的窗口实际显示区域的大小。对于现代浏览器(IE9+、Chrome、Firefox、Opera、Safari),可以使用window对象的innerWidth和...

    javascript获取网页宽高方法汇总

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

    图片适应任何分辨率,任何浏览器(CSS)

    为保持图片的原始宽高比,我们可以使用`height: auto`,这样当宽度改变时,高度会自动调整以保持原始的比例。 对于浏览器兼容性问题,CSS3的一些新特性可能在较旧的浏览器中不受支持。为了确保图片适应策略在所有...

    jQuery响应式自适应浏览器窗口大小图片排列代码.zip

    该代码的主要目标是创建一个类似Flickr和Google+的图片画廊效果,它能够让图片在不同浏览器窗口大小下保持良好的显示效果,同时保证所有图片具有统一的高度,图片自身的宽高比得以保留。这种布局方式可以确保图片...

    取得窗口大小 兼容所有浏览器的js代码.docx

    在JavaScript中,获取浏览器窗口的大小是一个常见的需求,这通常涉及到网页的响应式设计或动态布局。`window.innerWidth`和`window.innerHeight`是JavaScript提供的两个内置属性,它们分别用于获取浏览器视口的宽度...

    html页面高度不固定在不同浏览器下的兼容性设置

    这里使用 `Math.min()` 函数取两者中的最小值,这样可以在大多数浏览器中得到正确的高度。 然而,为了确保更好的兼容性和遵循W3C标准,我们在HTML文档开头添加了`<!DOCTYPE>`声明,如`<!DOCTYPE html>`。这将让...

    IE5.X浏览器源码

    其布局引擎Trident通过计算元素的宽高、边距和边框,确定元素在页面中的位置。值得注意的是,IE5.X的盒模型存在差异,内容区域(content)的宽度不包含边框和内填充,这在后续版本中进行了修正。 四、JavaScript...

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

    通过JavaScript,我们可以轻松地获取浏览器窗口的尺寸和页面元素的尺寸,进而实现动态布局和适配不同的设备屏幕。 ### 获取浏览器窗口尺寸的方法: 1. **document.body.clientWidth** - 描述:返回当前页面的可视...

    animais-fantasticos:最后的浏览器Javascript origamid

    4. **CSS操作**: Origamid效果通常涉及到元素的样式变化,因此需要使用JavaScript操作CSS属性,如`style`对象或`getComputedStyle`函数来动态改变元素的宽高、颜色、透明度等。 5. **动画与定时器**:要创建折纸...

    jQuery javascript获得网页的高度与宽度的实现代码

    11. **屏幕分辨率的高**:`window.screen.height` 屏幕的物理高度。 12. **屏幕分辨率的宽**:`window.screen.width` 屏幕的物理宽度。 13. **屏幕可用工作区高度**:`window.screen.availHeight` 用户可用的屏幕...

    嵌入到HTML的iframe自动适应大小

    随着移动设备的普及和屏幕尺寸的多样化,网站需要具备良好的响应性,即能够根据不同设备的屏幕尺寸自动调整布局和元素尺寸。对于iframe而言,这意味着需要一种机制使其能够根据内部内容的变化或者外部容器的尺寸变化...

    jquery自适应屏幕图片瀑布流布局代码

    2. **CSS样式**:设置基本样式,如容器的宽高比、内边距等,以及图片的相对定位,以便于后续的jQuery操作。 3. **jQuery加载**:在文档加载完成后,使用jQuery的`.ready()`函数初始化布局。获取容器元素的宽度,...

    【JavaScript源代码】JavaScript canvas实现代码雨效果.docx

    然后,根据浏览器窗口的尺寸设置画布的宽度和高度,以便适应不同屏幕大小。这一步至关重要,因为代码雨的效果需要在整个画布上呈现。 为了实现代码雨效果,我们需要考虑以下关键知识点: 1. 字体大小和行宽计算:...

    jQuery网站宽屏banner幻灯片切换代码

    这种设计可以充分利用屏幕空间,提高内容的视觉冲击力,使用户获得更好的浏览体验。 3. **幻灯片切换**:幻灯片切换是一种常见的网页交互元素,用于展示一系列内容,如图片、文本或视频,通过定时自动切换或用户...

    宽屏大气网络科技公司网站模板

    模板的“宽屏”特性意味着它设计时考虑了大屏幕设备,如桌面电脑和高分辨率的平板,通常采用16:9或更宽的屏幕比例,以展现更多的内容并创造更开阔的视觉效果。这通常涉及到响应式设计,通过媒体查询(media queries...

    自适应横向宽屏幻灯片代码.zip

    这种自适应能力是响应式网页设计的重要组成部分,确保无论用户使用何种设备浏览,都能获得一致且舒适的视觉体验。"效果不错"暗示了该代码实现了良好的动画过渡效果,既流畅又吸引人,增强了网站的专业感和现代感。 ...

    白色简洁线条宽屏自适应html5模板5583.zip

    同时,考虑到SEO(搜索引擎优化),模板可能也遵循了良好的编码实践,以帮助网站在搜索结果中获得更高的排名。 总的来说,"白色简洁线条宽屏自适应html5模板5583.zip"提供了一个现代、多功能且易于定制的网页设计...

Global site tag (gtag.js) - Google Analytics