BOM学习1

一，全局变量和window属性的却别：

　　

 window.color = "red";
    var age = 10;
    console.log(window.color, color);   //red 10
    delete window.color;
    delete window.age;    //全局变量不能通过window对象来删除，全局属性可以删除
    console.log(window.color);  //undefind
    console.log(color);    //报错
    console.log(age);    //10

　　说明：注意在上述删除window.color后，再调用window.color是不会报错的，只是在window对象里面遍历一遍属性，存在color就会获取，不存在就显示undefind。

 

二，窗口位置获取：

　　由于各大浏览器的内核以及版本的不同吗，对浏览器的解析都不尽相同，这里具体的细节，不再赘述，这里只写出跨浏览器的兼容代码即可：

　　

 //窗口位置  （浏览器窗口相对于屏幕的位置）
        //跨浏览器获取窗口位置
    let leftPos = (typeof window.screenLeft ==='number')?window.screenLeft:window.screenX; 
    let topPos = (typeof window.screenTop === 'number')?window.screenTop:window.screenY;

　　说明：先判断scrollLeft是否存在，存在(IE,Opera,Chrome,Safari)直接取值window.scrollLeft；不存在(Firefox中)则获取window.screenX;从而达到跨浏览器兼容的获取浏览器的位置。值得注意的是，上述的代码也不能精确的跨浏览器获取到窗口到屏幕的精确的位置距离，因为，IE,Opear中scrollTop,指的是浏览器屏幕到window对象的距离，比如浏览器全屏显示完全贴合屏幕，window.scrollTop的值就等于浏览器的工具栏的高度，而在chrome,Firefox,Safari中则是从浏览器的整体（即浏览器外部区域算起)到屏幕的距离。

 

三，窗口大小：

　　和上面一样，我们也无法能精确的跨浏览器获取浏览器窗口的大小，但是我们可以取得页面视口的大小，代码如下：

　　

let pageWidth = window.innerWidth,
        pageHeight = window.innerHeight;
    if(typeof pageWidth !=='number'){
        if(document.compatMode ==='CSS1Compat'){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        }else{
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
    }
    console.log(pageWidth,pageHeight);