详解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 BeautifulSoup中文乱码问题的2种解决方法
Apr 22 Python
python中的__init__ 、__new__、__call__小结
Apr 25 Python
使用Python解析JSON数据的基本方法
Oct 15 Python
Python中字典的setdefault()方法教程
Feb 07 Python
python+selenium实现登录账户后自动点击的示例
Dec 22 Python
Python扩展内置类型详解
Mar 26 Python
Python3.6.x中内置函数总结及讲解
Feb 22 Python
python的常见矩阵运算(小结)
Aug 07 Python
Python OpenCV图像指定区域裁剪的实现
Oct 30 Python
简单了解python装饰器原理及使用方法
Dec 18 Python
Scrapy爬虫文件批量运行的实现
Sep 30 Python
如何用PyPy让你的Python代码运行得更快
Dec 02 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
关于页面优化和伪静态
2009/10/11 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
javascript获取元素的计算样式
2019/05/24 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
python回调函数用法实例分析
2015/05/09 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python3中eval函数用法使用简介
2019/08/02 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python实现飞行棋游戏
2020/02/05 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
介绍一下SQL Server的全文索引
2013/08/15 面试题
怎样自定义一个异常类
2016/09/27 面试题
合作意向协议书范本
2014/03/31 职场文书
技术员岗位职责
2015/02/04 职场文书
升职自荐信怎么写
2015/03/05 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
培训班开班主持词
2015/07/02 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android