详解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不带重复的全排列代码
Aug 13 Python
Python运算符重载用法实例
May 28 Python
python实现的用于搜索文件并进行内容替换的类实例
Jun 28 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
Jun 30 Python
使用pandas对矢量化数据进行替换处理的方法
Apr 11 Python
python按行读取文件,去掉每行的换行符\n的实例
Apr 19 Python
浅谈Series和DataFrame中的sort_index方法
Jun 07 Python
ERLANG和PYTHON互通实现过程详解
Jul 05 Python
Python-接口开发入门解析
Aug 01 Python
django 前端页面如何实现显示前N条数据
Mar 16 Python
Python如何使用paramiko模块连接linux
Mar 18 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
Jun 03 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
杏林同学录(四)
2006/10/09 PHP
php 过滤危险html代码
2009/06/29 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
python 读入多行数据的实例
2018/04/19 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python使用tornado实现简单爬虫
2018/07/28 Python
简单了解python中对象的取反运算符
2019/07/01 Python
python实现交并比IOU教程
2020/04/16 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
应用服务器有那些
2012/01/19 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
12岁生日感言
2014/01/21 职场文书
家长建议怎么写
2014/05/15 职场文书
婚礼父母答谢词
2015/01/04 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL