`
japankn
  • 浏览: 216066 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

获得浏览器、屏幕宽高

阅读更多

网页可见区域宽: 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
相对文档的水平座标+垂直方向滚动的量

 

IEFireFox 差异如下:

IE6.0

FF1.06+

clientWidth = width + padding clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border



分享到:
评论

相关推荐

    解决Layui数据表格的宽高问题

    在尝试优化表格的宽高适应性时,我们可以采取一些策略来改善其跨平台和跨设备的显示效果。 首先,针对宽度(width)问题,原始代码中使用了固定宽度(如 `width : 1500`),这会导致在不同分辨率的屏幕上出现显示...

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

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

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

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

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

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

    解决jQuery动态获取手机屏幕高和宽的问题

    今天帮同事解决了用jQuery获得动态的手机屏幕宽高的问题。 问题的起因是,当同事用了一个需要全屏滚动的图片控件时,需要获得屏幕的高度来设置图片为全屏。但是他用$(window).height()始终无法第一次拿到高,刷新...

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

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

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

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

    自定义元素宽高比例(aspect-ratio)与@supports兼容支持和图片裁剪(object-fit)的用法

    这个属性允许我们设定一个元素的宽高比,确保元素在不同尺寸的屏幕或浏览器窗口下依然保持一致的比例。例如,如果我们想创建一个宽度为100%且宽高比为4:3的图像容器,我们可以这样写: ```css .container { width:...

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

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

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

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

    关于布局的像素问题--不同的显示器和浏览器页面显示

    无论是800*600还是1024*768分辨率,都应当根据实际需求来合理规划网页的宽度和高度,以确保在不同显示器上都能获得良好的视觉体验。此外,在进行设计时还需要注意图像文件的大小限制,以及选择合适的颜色模式等细节...

    IE5.X浏览器源码

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

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

    在JavaScript中,获取浏览器窗口的大小是一个常见的需求,这通常涉及到网页的响应式设计或动态布局。...这样的代码能够确保在不同浏览器环境下都能正确地得到窗口的尺寸和位置信息,从而实现更健壮的网页开发。

    傲游浏览器七大功能,看《2021》丰富多彩.docx

    通过一个简单的按键操作,用户即可迅速进入全屏模式,使得屏幕空间得到最大化的利用。这一功能不仅仅是为了让网页内容完全展示在屏幕上,更重要的是,它为用户带来了沉浸式的观影体验,仿佛置身于影院之中,观看...

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

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

    javascript获取网页宽高方法汇总

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

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

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

    跨浏览器响应式滚动条美化jQuery插件

    它支持垂直和水平滚动条,这意味着无论是长页面还是宽页面,都能得到良好的处理。这种灵活性使得jQuery Scrollbar在各种复杂布局中都能表现出色。 在实际使用中,开发者可以通过引入jQuery库和jQuery Scrollbar的...

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

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

Global site tag (gtag.js) - Google Analytics