JavaScript之窗口属性

最新推荐文章于 2023-07-18 22:15:32 发布

原创最新推荐文章于 2023-07-18 22:15:32 发布 · 419 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JavaScript窗口属性

JavaScript 同时被 2 个专栏收录

52 篇文章

订阅专栏

JavaScript学习之路

50 篇文章

订阅专栏

说到窗口属性，我们随着编程技能的提升，从刚开始的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语言我个人感觉是最有意思的了，我也是一个初学者，遇到问题，喜欢在博客上分享，也希望能帮到大家。

一个初学者，有什么不足或者纰漏的话，希望在下面评论出来，相互学习，共同进步。

--主页传送门--