// 获取标签占位的数据信息
// 获取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');