详解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上基于Markov链生成伪随机文本的教程
Apr 17 Python
python3实现暴力穷举博客园密码
Jun 19 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
Jun 15 Python
NetworkX之Prim算法(实例讲解)
Dec 22 Python
为什么入门大数据选择Python而不是Java?
Mar 07 Python
对python中的for循环和range内置函数详解
Apr 17 Python
win7 x64系统中安装Scrapy的方法
Nov 18 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
Jun 11 Python
python的pip有什么用
Jun 17 Python
Python join()函数原理及使用方法
Nov 14 Python
Python基础详解之描述符
Apr 28 Python
Python实现批量自动整理文件
Mar 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
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
tagName的使用,留一笔
2006/06/26 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
多版本Python共存的配置方法
2017/05/22 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
django序列化serializers过程解析
2019/12/14 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
麦当劳辞职信范文
2014/01/18 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android