详解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中的filter和lambda函数的使用
Apr 07 Python
全面理解Python中self的用法
Jun 04 Python
Python读取Json字典写入Excel表格的方法
Jan 03 Python
Python实现的多进程和多线程功能示例
May 29 Python
Python中format()格式输出全解
Apr 12 Python
django的model操作汇整详解
Jul 26 Python
python自定义时钟类、定时任务类
Feb 22 Python
Python argparse模块应用实例解析
Nov 15 Python
python使用rsa非对称加密过程解析
Dec 28 Python
关于TensorFlow新旧版本函数接口变化详解
Feb 10 Python
利用jupyter网页版本进行python函数查询方式
Apr 14 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
Apr 16 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递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php获取参数的几种方法总结
2014/02/18 PHP
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
python开发之函数定义实例分析
2015/11/12 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python实现简易内存监控
2018/06/21 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
selenium+python环境配置教程详解
2019/05/28 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Python列表推导式实现代码实例
2020/09/09 Python
配件采购员岗位职责
2013/12/03 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
《黄河颂》教学反思
2014/02/07 职场文书