JS坐标和位置宽高获取

??获取元素的坐标位置

clientX clientY : 事件触发时, 鼠标相当于浏览器窗口(坐标原点)的偏移值

pageX pageY : 事件触发时,鼠标相当于文档坐标原点的偏移值

offsetX offsetY : 事件触发时,鼠标相对于事件源对象的偏移值

screenX screenY : 事件触发时,鼠标相对于电脑屏幕的坐标值

clientX 和 pageX 区别:

在于页面是否出现滚动条 ; 没有滚动条, 两者时一致, 出现滚动条: clientX 始终先对于浏览器窗口, pageX 相对于 文档(页面整体的)

??获取元素的偏移值

offsetLeft offsetTop 获取元素相对于浏览器窗口的偏移值

方案一

css部分：

偏移值

方案二

??获取浏览器的宽高

window.innerWidth

window.innerHeight

??获取元素的宽高（1）

clientWidth clientHeight 包含padding 在内

let wd = wrap.clientWidth; // width + padding
let ht = wrap.clientHeight; // height + padding

??获取元素的宽高（2）

offsetWidth offsetHeight 包含padding + border在内

let wd = wrap.offsetWidth; // width + padding + border
let ht = wrap.offsetHeight; // height + padding + border

??获取元素边框的宽高

clientTop clientLeft

let bt = wrap.clientTop;  // 边框的高度
let bh = wrap.clientLeft;  // 边框的宽度
console.log(bt, bh);

??获取元素滚动的宽度和高度

(理解为 内容真实的宽度和高度)

scrollWidth scrollHeight

let swd = wrap.scrollWidth;
let sht = wrap.scrollHeight; 
console.log(swd, sht);

??获取元素内容被卷出去的宽度和高度

借助于滚动事件, 出现滚动条 , 在滚动事件中才可获取

scrollTop scrollLeft

// 滚动事件 onscroll
wrap.onscroll = function () {
    // console.log(1);
    let scrolltop = this.scrollTop;
    let scrollleft = this.scrollLeft;
    console.log(scrolltop, scrollleft);
}