详解JavaScript编程中的window与window.screen对象


Posted in Python onOctober 26, 2015

Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:

window.document.getElementById("header");

与此相同:

document.getElementById("header");

Window 尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)

Window Screen
window.screen对象在编写时可以不使用 window 这个前缀。
一些属性:

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度
  • Window Screen 可用宽度
  • screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。

实例

返回您的屏幕的可用宽度:

<script>

document.write("Available Width: " + screen.availWidth);

</script>

以上代码输出为:

Available Width: 1440

Window Screen 可用高度
screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。
实例
返回您的屏幕的可用高度:

<script>

document.write("Available Height: " + screen.availHeight);

</script>

以上代码将输出:

Available Height: 860
Python 相关文章推荐
Python利用多进程将大量数据放入有限内存的教程
Apr 01 Python
在Python的Django框架的视图中使用Session的方法
Jul 23 Python
Python Requests 基础入门
Apr 07 Python
详解Python文本操作相关模块
Jun 22 Python
Python 文件操作的详解及实例
Sep 18 Python
Flask框架Flask-Login用法分析
Jul 23 Python
selenium+python设置爬虫代理IP的方法
Nov 29 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
Feb 15 Python
Python使用ElementTree美化XML格式的操作
Mar 06 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
Mar 12 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
Aug 17 Python
python 单机五子棋对战游戏
Apr 28 Python
深入讲解Python中的迭代器和生成器
Oct 26 #Python
Windows下使Python2.x版本的解释器与3.x共存的方法
Oct 25 #Python
解析Python编程中的包结构
Oct 25 #Python
Python实现获取域名所用服务器的真实IP
Oct 25 #Python
Python制作爬虫采集小说
Oct 25 #Python
Python验证企业工商注册码
Oct 25 #Python
日常整理python执行系统命令的常见方法(全)
Oct 22 #Python
You might like
phpBB BBcode处理的漏洞
2006/10/09 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
countup.js实现数字动态叠加效果
2019/10/17 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
js 数组当前行添加数据方法详解
2020/07/28 Javascript
Python re模块介绍
2014/11/30 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python实现telnet客户端的方法
2015/04/15 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Python之列表实现栈的工作功能
2019/01/28 Python
python每天定时运行某程序代码
2019/08/16 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
生物制药自我鉴定
2014/01/25 职场文书
保密承诺书
2014/03/27 职场文书
护理专业自荐书
2014/06/04 职场文书
煤矿安全协议书
2014/08/20 职场文书
销售内勤岗位职责
2015/02/10 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
员工年度工作总结2015
2015/05/18 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
python数据处理之Pandas类型转换
2022/04/28 Python