JS坐标和位置宽高获取

💚获取元素的坐标位置

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

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

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

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

clientX 和 pageX 区别:

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

💚获取元素的偏移值

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

方案一

css部分：

CSS

<style>
     *{
         margin: 0;
         padding: 0;
     }
     .wrap{
         width: 200px;
         height: 200px;
         background-color: skyblue;
         margin:130px;
         padding:50px;
         border:20px solid red;
         position: relative;
         left:100px;
     }
</style>

JS

<div class="wrap">偏移值</div>
<script>
    let wrap = document.querySelector('.wrap');
    let ofwd = wrap.offsetLeft;
    let ofht = wrap.offsetTop;
    console.log(ofwd, ofht);
</script>

方案二

JS

<script>
	//  第二种方法  获取元素相对于浏览器窗口的偏移值  
    //  结果是一个  DOMRect  DOM矩形对象 该对象包含八个属性
    /* 
        bottom: 330  元素的下边界距离浏览器窗口顶部的偏移值
        height: 200  元素的高度 (height + padding + border)
        left: 230  元素的左边界距离浏览器窗口左边的偏移值 
        right: 430   元素的右边界距离浏览器窗口左边的偏移值 
        top: 130   元素的上边界距离浏览器窗口顶部的偏移值 
        width: 200   元素的宽度(width + padding + border)
        x: 230  等于 left
        y: 130  等于 top               
    */
    // DOMRect  DOM矩形对象
    let res = wrap.getBoundingClientRect();
    console.log(res.left);
</script>

❤️获取浏览器的宽高

window.innerWidth

window.innerHeight

❤️获取元素的宽高（1）

clientWidth clientHeight 包含padding 在内

JS

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

❤️获取元素的宽高（2）

offsetWidth offsetHeight 包含padding + border在内

JS

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

❤️获取元素边框的宽高

clientTop clientLeft

JS

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

❤️获取元素滚动的宽度和高度

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

scrollWidth scrollHeight

JS

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

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

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

scrollTop scrollLeft

JS

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