详解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使用random和tertools模块解一些经典概率问题
Jan 28 Python
在CMD命令行中运行python脚本的方法
May 12 Python
caffe binaryproto 与 npy相互转换的实例讲解
Jul 09 Python
Django contenttypes 框架详解(小结)
Aug 13 Python
django-rest-framework 自定义swagger过程详解
Jul 18 Python
8段用于数据清洗Python代码(小结)
Oct 31 Python
使用python绘制二维图形示例
Nov 22 Python
解决Python spyder显示不全df列和行的问题
Apr 20 Python
使用matplotlib动态刷新指定曲线实例
Apr 23 Python
python中字符串的编码与解码详析
Dec 03 Python
浅谈pytorch中的dropout的概率p
May 27 Python
Python爬虫中urllib3与urllib的区别是什么
Jul 21 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
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
python分析网页上所有超链接的方法
2015/05/08 Python
Python交互环境下实现输入代码
2018/06/22 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
python-地图可视化组件folium的操作
2020/12/14 Python
Python 实现一个简单的web服务器
2021/01/03 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
外贸英语毕业生自荐信
2013/11/14 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
诉前财产保全担保书
2014/05/20 职场文书
团队队名口号大全
2014/06/06 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫