分享好友 教程首页 教程搜索 频道列表

js获取浏览器宽度

2022-08-20 20:424300
+关注29
核心提示:网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.client...


网页可见区域宽: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


html中使用的代码

<SCRIPT   LANGUAGE="JavaScript">
// alert(document.body.scrollHeight);
// alert(document.body.scrollTop);
// alert(document.documentElement.scrollTop);
alert(document.body.clientWidth);
alert(document.body.scrollHeight);

</SCRIPT>


本文标签: #宽度 #屏幕 #浏览器 #分辨率
整理员:小黑
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

常规的css宽度减法使用说明

    其实在CSS中,是可以用减法的,看详情学方法

小黑 CSS教程 12023-04-06

前端css实现高度等于宽度

    今天在开发时遇到一个问题,如何使高度等于百分比的宽度。原本的想法是通过js获取,但是这个方法感觉太麻烦,希望能用css做的事情就不要js去做。完美的方案是通过padding来实现的。原理padding的定义:padding属性设

网络转载 CSS教程2022-08-17

修改destoon商铺默认的横幅高宽度参数

    修改代码测试

模板开发网 destoon程序2022-06-07

为啥a标签不能设置宽度?

    为啥a标签不能设置宽度?在a标签上用css设置宽度没有任何反应,到底是为什么那?因为行内元素都是不能设置宽高的,a标签也是行内元素,所以也不能设置宽度,如果想设置宽度,必须把行内元素转换为block或者inline-bl

网络转载 CSS相关2021-10-03

设计一个手机网站的尺寸宽度是用640px还是750px

    iPhone手机网页的设计尺寸iPhone5尺寸是640x1136px分辨率是326PPIiPhone4和iPhone4S尺寸是640x960px分辨率是326PPIiPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI安卓网页的设计尺寸320dp:一个普通的手机屏幕(240x320,320×480,480x800)480dp:一个中间平板电脑像(480×800)600dp:7寸平板电脑(600×1024)720

小黑 web前端开发2020-03-25

下一篇
我来说两句
抢沙发