详解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内置的字符串处理函数整理
Jan 29 Python
使用setup.py安装python包和卸载python包的方法
Nov 27 Python
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
Dec 03 Python
学习python 之编写简单乘法运算题
Feb 27 Python
Python 网页解析HTMLParse的实例详解
Aug 10 Python
tensorflow 输出权重到csv或txt的实例
Jun 14 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
Oct 26 Python
django中forms组件的使用与注意
Jul 08 Python
python操作docx写入内容,并控制文本的字体颜色
Feb 13 Python
Python requests及aiohttp速度对比代码实例
Jul 16 Python
详解python with 上下文管理器
Sep 02 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
Jan 08 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/08/21 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
Javascript 类型转换方法
2010/10/24 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
javascript时间函数大全
2014/06/30 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Python3如何判断三角形的类型
2020/04/12 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
工程专业毕业生自荐信范文
2013/12/25 职场文书
决心书标准格式
2014/03/11 职场文书
迁户口计划生育证明
2014/10/19 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
交通安全温馨提示语
2015/07/14 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
选购到合适的激光打印机
2022/04/21 数码科技