详解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 相关文章推荐
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
Apr 09 Python
python在windows命令行下输出彩色文字的方法
Mar 19 Python
Python判断字符串与大小写转换
Jun 08 Python
浅谈python中的__init__、__new__和__call__方法
Jul 18 Python
Pandas读写CSV文件的方法示例
Mar 27 Python
Django组件cookie与session的具体使用
Jun 05 Python
flask应用部署到服务器的方法
Jul 12 Python
Flask框架中request、请求钩子、上下文用法分析
Jul 23 Python
django框架auth模块用法实例详解
Dec 10 Python
tensorflow 自定义损失函数示例代码
Feb 05 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
Apr 20 Python
Python 生成短8位唯一id实战教程
Jan 13 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
html中select语句读取mysql表中内容
2006/10/09 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python之列表实现栈的工作功能
2019/01/28 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
python使用Geany编辑器配置方法
2020/02/21 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
python反扒机制的5种解决方法
2021/02/06 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
职工趣味运动会方案
2014/02/10 职场文书
研讨会主持词
2014/04/02 职场文书
人资专员岗位职责
2014/04/04 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL