说到窗口属性,我们随着编程技能的提升,从刚开始的html到加上css再到单独的JavaScript再接着JavaScript和DOM连接
我们都离不开和浏览器窗口打交道,当然,熟悉浏览器窗口操作也是我们向更深一层进阶。
查看滚动条滚动距离
随着IE版本的提升 同样浏览器窗口属性也出现了一些变化。
window.pageXOffset/windowpageYOffset(IE8及IE8以下不兼容)
console.log(window.pageXOffset);
console.log(window.pageYOffset);
document.body.scrollLeft/scrollTop,docuemnt.docuemntElement.scrollLeft/scrollTop.这两个属性比较混乱,有时候那个能用有时候这个能用。当一个能用的时候,另一个的值为零。所以两个相加即可。
console.log(document.body.scrollLeft + document.documentElement.scrollLeft);
console.log(document.body.scrollTop + document.documentElement.scrollTop);
有时我们在写程序的时候,当运用到这个东西,因为用户所选用浏览器的不同,就得考虑兼容性问题。下面写个兼容性代码。
functiongetScrollOffset(){
if(window.pageXOffset){
return {
x : window.pageXOffset,
y : window.pageYOffset,
}
}else{
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop,
}
}
}
查看可视区窗口的尺寸
IE版本的提升,随着浏览器的发展,查看可视区窗口的尺寸也出现了一些不兼容问题。
window.innerWidth/window.innerHeight(IE8及IE8以下不兼容)
console.log(window.innerWidth);
console.log(window.innerHEight);
IE8及IE8以下兼容又出现两两种模式:标准模式和怪异模式。标准模式和怪异模式的区别就是我们写html代码的最顶部的<!DOCTYPE html>这个东西的有无,有的话是标准模式,没有的话是怪异模式。
检测是否是标准模式:document.compateMode 返回值:如果返回“CSS1Compate”就是标准模式,如果返回“Back Compate” 就是怪异模式。
console.log(document.compateMode);
//"CSS1Compate" 标准模式
document.documentElement.clientWidth/document.documentElement.clientHeight (标准模式下)
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
document.body.clientWidth/document.body.client(怪异模式下)
console.log(document.body.clientWidth);
console.log(document.body.clientHeight);
检测可视区大小我们要用的时候,必然要考虑兼容性问题
function getClientOffset(){
if(window.innerWidth){
return {
w : window.innerWidth,
h : window.innerHeight,
}
}else{
if(document.compateMode === "CSS1Compate"){
return {
w : docuemnt.documentElement.clientWidth,
h : document.documentElement.clientHeight,
}
}else{
return {
w : document.body.clientWidth,
h : document.body.clientHeight
}
}
}
}
获取Dom元素尺寸
获得元素的几何尺寸----> elem.getBoundingClientRect()
这个方法兼容性很好,该方法返回出一个对象,对象的里面有left,top,right,bottom等属性,left和top代表元素左上角的坐标,right和bottom代表元素右下角的坐标。height和width在老版本IE中并未实现,还有一个也是致命的:返回的结果不是实时的。
var div = document.getElementsByTagName('div')[0];
console.log(div.getBoundingClientRect());
获取视觉上的元素尺寸 ----> elem.offsetWidth/elem.offsetHeight
var div = document.getElementsByTagName('div')[0];
console.log(div.offsetWidth);
console.log(div.offsetHeight);
获取元素所在的位置----->elem.offsetLeft/elem.offsetTop
对于无对位父级的元素,返回相对文档的坐标,对于有对位父级的元素,返回相对于最近的定位父级的坐标
var div = document.getElementsByTagName('div')[0];
console.log(div.offsetLeft);
console.log(div.offsetTop);
获取最近有定位的父级---->elem.offsetParent
返回附近有定位的父级,如果无,返回body。body.offsetParent 返回null。
var div = document.getElementsByTagName('div')[0];
console.log(div.offsetParent);
让滚动条滚动
在window上有三个方法,scroll(x,y),scrollTo(x,y), scrollBy(x,y).说白了也可以说也就是两种功能。前面的scroll()和scrollTo()作用是一样的,用哪个都可以,都一样。
scroll()/scrollTo():将滚动条滚动到某个确定的位置。
scrollBy():将滚动条在之前位置的基础上累加。
window.scroll(0,100);
window.scrollTo(100,0);
window.scrollBy(10,10);
JavaScript语言我个人感觉是最有意思的了,我也是一个初学者,遇到问题,喜欢在博客上分享,也希望能帮到大家。
一个初学者,有什么不足或者纰漏的话,希望在下面评论出来,相互学习,共同进步。
--主页传送门--