「这是我参与11月更文挑战的第24天,活动详情查看:2021最后一次更文挑战」
window代表整个浏览器,代表全局。所以在全局声明的函数、变量都是属于window,包括变量未声明就赋值也该变量也属于window。
- 查看浏览器窗口尺寸(或者叫可视区域,不包括工具栏和滚动条)
//IE9以上、Chrome、Firefox、Opera 以及 Safari:
window.innerWidth;
window.innerHeight;
//IE5,6,7,8
window.documentElement.clientHeight ;
window.documentElement.clientWidth;
//IE5,6,7,8兼容性紊乱上面方法不一定行,不行可用下面这种方式
window.body.clientWidth
window.body.clientHeight
封装一个兼容所有浏览器的方法,用于获取浏览器可视宽高:
window.getInnerWH = function () {
return {
width: window.innerWidth || window.documentElement.clientWidth || window.body.clientWidth,
height: window.innerHeight || window.documentElement.clientHeight || window.body.clientHeight
}
}
- 查看完整窗口大小
window.outerWidth
window.outerHeight
- 查看元素的尺寸
var odiv = document.getElementsByTagName('div')[0]
odiv.offsetWidth
odiv.offsetHeight
offsetHeight = height + padding + border offsetWidth = width + padding + border 4. 查看元素的位置
odiv.offsetLeft 距离左边距离
odiv.offsetTop 距离右边距离
有定位元素,返回的是相对于最近有定位的父级元素的位置;无定位元素,返回的是相对于文档的位置
5. 查看元素最近有定位的父级
odiv.offsetParent
返回最近有定位的父级,若无,则返回body;body的offsetParent返回null;
6. 查看元素的几何尺寸
odiv.getBoundingClientRect()
该方法返回一个对象,对象里面有left、right、top、bottom和width、height。
兼容性很好,但返回的结果并不是实时的。
7. 打开一个窗口
window.open(URL,name,specs,replace)
URL:表示要打开的页面地址。如果没有指定URL,打开空白窗口 name:指定target属性或窗口的名称
- _blank - URL加载到一个新的窗口。这是默认
- _parent - URL加载到父框架
- _self - URL替换当前页面
- _top - URL替换任何可加载的框架集
- name - 窗口名称
specs:设置窗口规格,可选。一个逗号分隔的项目列表
- height=pixels 窗口的高度。最小值为100
- left=pixels 该窗口的左侧位置
- location=yes|no|1|0 是否显示地址字段.默认值是yes
- menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
- resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
- scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
- status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
- titlebar=yes|no|1|0 是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
- toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes
- top=pixels 窗口顶部的位置.仅限IE浏览器
- width=pixels 窗口的宽度.最小.值为100
- channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
- directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器
- fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window,还必须在影院模式。仅限IE浏览器
replace:可选,用于替换浏览历史中的当前条目 Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值: true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。