详解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在多玩图片上下载妹子图的实现代码
Aug 13 Python
Python的Django框架可适配的各种数据库介绍
Jul 15 Python
搞定这套Python爬虫面试题(面试会so easy)
Apr 03 Python
python 实现快速生成连续、随机字母列表
Nov 28 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
Dec 10 Python
Python多线程实现支付模拟请求过程解析
Apr 21 Python
Django DRF路由与扩展功能的实现
Jun 03 Python
Python参数传递及收集机制原理解析
Jun 05 Python
Python偏函数Partial function使用方法实例详解
Jun 17 Python
python获取整个网页源码的方法
Aug 03 Python
用Python进行栅格数据的分区统计和批量提取
May 27 Python
Python 居然可以在 Excel 中画画你知道吗
Feb 15 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中base_convert()进制数字转换函数实例
2014/11/20 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
用JS实现选项卡
2020/03/23 Javascript
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
python实现扫描ip地址的小程序
2019/04/16 Python
Python切图九宫格的实现方法
2019/10/10 Python
开业主持词
2014/03/21 职场文书
初三学生评语大全
2014/04/24 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
电子商务实训报告总结
2014/11/05 职场文书
中学音乐课教学反思
2016/02/18 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
15个值得收藏的JavaScript函数
2021/09/15 Javascript
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript