关于client、offset、screen与page的认识

简单的笔记好像没必要放上来...整理点可能需要弄混的东西吧。

注意：offset如果获取left或top值是相对于offsetParent的位置来取，offsetParent为当前对象的设置了定位属性（绝对定位、相对定位）的父标签。如果没有，那么就相对于body。

client-offset-page-screen理解.png

HTML代码：

<p>盒子的宽度为100，10个像素内边距，边框为300，相对定位顶部1200、左边1200</p>
<div id="box"></div>

CSS代码：

        *{
            margin: 0;
            padding: 0;
            border: none;
        }
        #box{
            width: 100px;
            height: 100px;
            border: 30px solid #000;
            padding:10px;
            position: relative;
            top: 1200px;
            left: 1200px;
        }
        p{
            position: fixed;
        }

JS代码：

    window.onload = function () {
        var box = document.getElementById("box");
//        client属性不包括边框
        console.log("box的client属性");
        console.log("box的clientWidth"+box.clientWidth);
        console.log("box的clientHeight"+box.clientHeight);
        console.log("box的clientLeft"+box.clientLeft);
        console.log("box的clientTop"+box.clientTop);
        console.log("");
        console.log("box的offset属性");
        console.log("box的offsetWidth"+box.offsetWidth);
        console.log("box的offsetHeight"+box.offsetHeight);
        console.log("box的offsetLeft"+box.offsetLeft);
        console.log("box的offsetTop"+box.offsetTop);
        console.log("");
        box.onclick= function (event) {
            event = event || window.event;
            console.log("screenX:点击的点相对于显示器左边的距离为："+event.screenX);
            console.log("screenY:点击的点相对于显示器顶部的距离为："+event.screenY);
            console.log("pageX:点击的点相对于document左边的距离为："+event.pageX);
            console.log("pageY:点击的点相对于document顶部的距离为："+event.pageY);
        }
    }