标签占位信息

  // 获取标签占位的数据信息

        // 获取css样式的属性值,执行结果一定有px单位,需要通过parseInt() 获取 整数部分

        // 获取标签的占位数据,执行结果,都是数值,没有px单位,可以直接使用

        var oDiv = document.querySelector('div');

        // 1,获取  宽高(内容) + padding + border  占位数据

        // console.log( oDiv.offsetWidth );    // 水平方向 左右的padding和border都算

        // console.log( oDiv.offsetHeight );   // 垂直方向 上下的padding和border都算

        // 2,获取  宽高(内容) + padding

        // console.log( oDiv.clientWidth );     // 水平方向 左右的padding都算

        // console.log( oDiv.clientHeight );    // 垂直方向 左右的padding都算

        // 3,独立获取 边框线宽度

        // console.log( oDiv.clientTop );       // 上边框线宽度

        // console.log( oDiv.clientLeft );      // 左边框线宽度

        // 通过获取css样式,来获取右,下边框线的宽度

        // console.log( window.getComputedStyle(oDiv).borderRightWidth );

        // console.log( window.getComputedStyle(oDiv).borderBottomWidth );

        // 4,获取与定位父级对象的间距

        // console.dir(标签对象)  其中有一个属性  offsetParent

        // 就是当前这个标签,定位的父级对象 之后的内容,就是定位的父级对象

        // (1) 父级没有定位属性

        //     定位对象是body

        //     css设定 position: fixed; 定位父级是 null  视窗窗口的左上角

        // (2) 父级有定位属性

        //     定位对象是父级标签

        //     css设定 position: fixed; 定位父级是 null  视窗窗口的左上角

        // 总结:

        //     标签有fixed,定位对象是视窗窗口

        //     父级没有定位属性,定位对象是body

        //     父级有定位属性,定位对象是父级标签

        //     console.dir(标签对象)  看 offsetParent 后 定义的标签

 

 // BOM操作 : 对浏览器的操作

        // window   的顶级对象

        // DOM操作 : 对文档的操作

        // document 的顶级对象

        // window    对象中 存储 所有对浏览器操作的方法

        // document  对象中 存储 所有对文档的操作方法

        console.log(window);

        console.dir(document);

        // window顶级对象中,存储的方法,可以不写window,也能正常调用

        // document中存储的方法,必须要写document

        window.alert('我是弹窗功能1111');

        alert('我是弹窗功能2222');