详解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实现rest请求api示例
Apr 22 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
Nov 19 Python
手把手教你用python抢票回家过年(代码简单)
Jan 21 Python
Python网络编程使用select实现socket全双工异步通信功能示例
Apr 09 Python
Python 实现删除某路径下文件及文件夹的实例讲解
Apr 24 Python
基于python神经卷积网络的人脸识别
May 24 Python
python实现京东秒杀功能
Jul 30 Python
Python利用递归实现文件的复制方法
Oct 27 Python
Python 3.8新特征之asyncio REPL
May 28 Python
python selenium 查找隐藏元素 自动播放视频功能
Jul 24 Python
python 使用openpyxl读取excel数据
Feb 18 Python
简单且有用的Python数据分析和机器学习代码
Jul 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
一篇入门的php Class 文章
2007/04/04 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
js精度溢出解决方案
2012/12/02 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
webpack打包非模块化js的方法
2018/10/24 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
一道写SQL的面试题和答案
2013/11/19 面试题
中职生自荐信
2013/10/13 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
区三好学生主要事迹
2014/01/30 职场文书
房屋公证委托书
2014/04/03 职场文书
食品安全工作方案
2014/05/07 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
承兑汇票延期证明
2015/06/23 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL