文档章节

智慧前端:js获取with和height屏幕浏览器的各种汇总

听那水
 听那水
发布于 2015/03/18 19:52
字数 500
阅读 294
收藏 42

Document 对象

1、document.body.clientWidth、document.body.clientHeight

返回网页可见区域宽高

2、document.body.offsetWidth、document.body.offsetHeight

返回网页可见区域宽高(包括边线的宽)

3、document.body.scrollWidth、document.body.scrollHeight

返回网页正文区域宽高

4、document.body.scrollTop、document.body.scrollLeft

返回网页被卷去的top宽度和left宽度

Window 对象

5、window.screenTop、window.screenLeft

返回窗口相对于屏幕的X和Y坐标

6、window.screen.height、window.screen.width

返回屏幕分辨率的高和宽

7、window.screen.availHeight、window.screen.availWidth

返回屏幕可用工作区高宽


Screen 对象

8、screen.width、screen.height 

    返回显示屏幕的分辨率(宽,高)

9、screen.availWidth、screen.availHeight

    返回显示屏幕的宽度和高度 (除 Windows 任务栏之外)

<html>
<script>
function WandH(){
document.write(
"屏幕分辨率为:"+screen.width+"*"+screen.height/*分辨率*/
+"<br />"+
"屏幕可用大小:"+screen.availWidth+"*"+screen.availHeight/*除去任务栏*/
+"<br />"+
"网页可见区域宽:"+document.body.clientWidth/*屏幕宽度*/
+"<br />"+
"网页可见区域高:"+document.body.clientHeight/*屏幕高度(可显)*/
+"<br />"+
"网页可见区域宽(包括边线的宽):"+document.body.offsetWidth/*宽(包括边线的宽)*/
+"<br />"+
"网页可见区域高(包括边线的宽):"+document.body.offsetHeight/*高(包括边线的宽*/
+"<br />"+
"网页正文全文宽:"+document.body.scrollWidth/*网页可见区域宽:"+document.body.clientWidth/*屏幕宽度*/
+"<br />"+
"网页正文全文高:"+document.body.scrollHeight/*网页可见区域高:"+document.body.clientHeight/*屏幕高度(可显)*/
+"<br />"+
"网页被卷去的高:"+document.body.scrollTop/*滚动高度*/
+"<br />"+
"网页被卷去的左:"+document.body.scrollLeft/*滚动宽度*/
+"<br />"+
"网页正文部分上:"+window.screenTop/*返回窗口相对于屏幕的X和Y坐标。*/
+"<br />"+
"网页正文部分左:"+window.screenLeft/**/
+"<br />"+
"屏幕分辨率的高:"+window.screen.height/*分辨率*/
+"<br />"+
"屏幕分辨率的宽:"+window.screen.width/*分辨率*/
+"<br />"+
"屏幕可用工作区高度:"+window.screen.availHeight/**/
+"<br />"+
"屏幕可用工作区宽度:"+window.screen.availWidth/**/
);
}
</script>
<body onLoad="WandH()" >
</body>
</html>


© 著作权归作者所有

听那水
粉丝 1
博文 9
码字总数 4697
作品 0
青岛
网页/平面设计
私信 提问
自适应浏览器高度和宽度+字体大小 JS(主要针对Java后端>>全栈工程师)

自适应浏览器高度和宽度+字体大小有点: 1.能自动判断当前浏览器的高度和宽度(页面里面设置均百分比宽度) 2.JS里面自己设置字体大小,在不同分辨率下显示不一样的字体 3.在浏览器最大化时候...

RGB_俞子轩
2018/06/29
0
0
前端入门6-JavaScript客户端api&jQuery

声明 本系列文章内容全部梳理自以下四个来源: 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在...

请叫我大苏
2018/11/01
0
0
浅谈零基础新手学HTML5前端开发学习路线

  浅谈HTML5前端开发学习路线。学习HTML5开发先学学HTML、CSS3、JS这些基本的知识,HTML5学习入门的内容基本差不多,但是学习的成果却千差万别,这就是所谓的基础,所谓万丈高楼平地起,地...

Java编程语言基础入门博客
2017/04/04
0
0
javascript组件控件开发接口规范发文

本文目的:为了使得javascript组件控件开发、选择、使用变得更加高效。 使用javascript开发的组件、控件各式各样,琳琅满目,五花八门。比如tree控件就有各种各样,表格控件更不用说,其他控...

lightpig
2014/09/23
1K
3
前端开发优化的一些常见方法汇总

WEB前端开发常用的优化技巧汇总 减少HTTP请求的次数或者减小请求数据的大小 页面中每发送一次HTTP请求,都需要完成请求加响应这个完整的HTTP事务,会消耗一些时间,也可能会导致HTTP链接通道...

无敌UFO
04/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

通过微服务来正确实施SOA

对于组织来说,能够构建、发展和扩展大型应用程序是至关重要的, 但所涉及的挑战使其成为一项艰巨的任务。正因为如此, 微服务凭借能够将单个组件拆分成围绕特定业务功能的独立服务,已成为构建...

Linux就该这么学
21分钟前
2
0
从 Spark 到 Kubernetes — MaxCompute 的云原生开源生态实践之路

2019年5月14日,喜提浙江省科学技术进步一等奖的 MaxCompute 是阿里巴巴自研的 EB 级大数据计算平台。该平台依托阿里云飞天基础架构,是阿里巴巴在10年前做飞天系统的三大件之分布式计算部分...

阿里云官方博客
25分钟前
1
0
使用python来操作redis用法详解

1、redis连接 redis提供两个类Redis和StrictRedis用于实现Redis的命令,StrictRedis用于实现大部分官方的命令,并使用官方的语法和命令,Redis是StrictRedis的子类,用于向后兼容旧版本的red...

dragon_tech
25分钟前
2
0
给研发工程师的代码质量利器 | SOFAChannel#5 直播整理

> SOFA:Channel,有趣实用的分布式架构频道。 > > 本文根据 SOFAChannel#5 直播分享整理,主题:给研发工程师的代码质量利器 —— 自动化测试框架 SOFAActs。 > > 回顾视频以及 PPT 查看地址...

SOFAStack
27分钟前
1
0
段错误总结

https://blog.csdn.net/e_road_by_u/article/details/61415732 一、段错误是什么 一句话来说,段错误是指访问的内存超出了系统给这个程序所设定的内存空间,例如访问了不存在的内存地址、访问...

悲催的古灵武士
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部