详解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服务器端收发请求的实现代码
Sep 29 Python
python 3利用BeautifulSoup抓取div标签的方法示例
May 28 Python
pytorch: tensor类型的构建与相互转换实例
Jul 26 Python
Python去除字符串前后空格的几种方法
Mar 04 Python
python添加菜单图文讲解
Jun 04 Python
python实现屏保程序(适用于背单词)
Jul 30 Python
pygame实现五子棋游戏
Oct 29 Python
在tensorflow中实现去除不足一个batch的数据
Jan 20 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
May 20 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
Jun 30 Python
Python控制鼠标键盘代码实例
Dec 08 Python
详解Python魔法方法之描述符类
May 26 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/11/16 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
jcrop基本参数一览
2013/07/16 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
露营世界:Camping World
2017/02/02 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
几个常见的消息中间件(MOM)
2014/01/08 面试题
乡村文明行动实施方案
2014/03/29 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
商务邀请函
2015/01/30 职场文书
行政助理岗位职责
2015/02/10 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
运动会广播稿20字
2015/08/19 职场文书
物业管理交接协议书
2016/03/24 职场文书
四年级作文之植物
2019/09/20 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书