详解JavaScript编程中的window与window.screen对象

yipeiwu_com6年前Python基础

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

相关文章

python3实现带多张图片、附件的邮件发送

本文实例为大家分享了python3实现多张图片附件邮件发送的具体代码,供大家参考,具体内容如下 直接上代码,没有注释! from email.mime.text import MIM...

pandas通过loc生成新的列方法

pandas通过loc生成新的列方法

pandas中一个很便捷的使用方法通过loc、iloc、ix等索引方式,这里记录一下: df.loc[条件,新增列] = 赋初始值 如果新增列名为已有列名,则在原来的数据列上改变 i...

Python实现两款计算器功能示例

本文实例为大家分享了Python实现计算器功能示例代码,供大家参考,具体内容如下 1.简单计算器 #计算一个表达式的时候,首先肯定是先算括号里面的,再算乘除法,后算加减法 imp...

linux环境下python中MySQLdb模块的安装方法

前言 最近开始学习python数据库编程后,在了解了基本概念,打算上手试验一下时,卡在了MYSQLdb包的安装上,折腾了半天才解决。记录一下我在linux中安装此包遇到的问题。 系统是u...

Python 匹配任意字符(包括换行符)的正则表达式写法

想使用正则表达式来获取一段文本中的任意字符,写出如下匹配规则: (.*) 结果运行之后才发现,无法获得换行之后的文本。于是查了一下手册,才发现正则表达式中,“.”(点符号)匹配的是除了换...