2021-05-07 js的尺寸,位置和坐标汇总_js 字符size和位置坐标的关系-CSDN博客

本文链接：https://blog.csdn.net/rowlet/article/details/116435278

难点

1.offsetX,clientX,pageX,screenX的区别

2.offsetWidth和offsetLeft各自的含义和区别

3.document.documentElement.clientWidth的含义以及window.innerWidth的使用范围

*IE 8 及更早 IE 版本不支持window.innerWidth，可以使用 document.documentElement.clientWidth属性。(兼容问题)

4.clientWidth和clientLeft的含义和区别

快速图解offsetX,clientX,pageX,screenX:
在这里插入图片描述
(来自:https://blog.csdn.net/qq_42068550/article/details/92594961)

一.IE:
1.document.body.clientWidth/Height body对象的宽高
2.document.documentElement.clientWidth/Height 可视区域的宽高
3.document.documentElement.scrollLeft/Top 滚动条水平/垂直方向上滚动的值

在这里插入图片描述

在这里插入图片描述
验证:

<body style="width: 2000px;"></body>

    //获取body的宽
    console.log(document.body.clientWidth);//2000
    //获取当前浏览器可视区域的宽
    console.log(document.documentElement.clientWidth);//598
    //获取滚动条水平方向上的滚动距离
    console.log(document.documentElement.scrollLeft);//395

二.只读:

    <style>
        .wrap{
            width: 800px;
            border: 10px dashed blue;
            padding: 30px;
            position: relative;
        }
        .box{
            width: 350px;
            height: 100px;
            background-color: burlywood;
            padding: 50px;
            border: 20px solid black;
            margin: 100px;
            overflow: auto;
        }
    </style>
    <body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>

1.clientWidth/Height 元素的可见宽高(=content+padding)
2.offsetWidth/Height 元素的实际宽高(=content+padding+border)
clientWidth=offsetWidth+border(若有)
在这里插入图片描述
验证:

	var box=document.querySelector('.box');
	
    //当前元素的可见宽度=width+左右padding
    console.log(box.clientWidth); //450=350+50*2
    //当前元素的实际宽度=width+左右padding+左右border
    console.log(box.offsetWidth); //650=350+50*2+100*2

3.clientLeft/Top 读取元素的border
4.offsetParent 元素的设置定位的父元素或body
5.offsetLeft/Top 元素相对于其offsetParent的距离,即元素的border与其offsetParent的border的距离
一般来说就是父元素的padding值+子元素的margin值(不用*2)
例子:offsetLeft是获取 div 元素的左侧偏移量,就是div离其offsetParent左侧的距离
在这里插入图片描述

验证:

   //获取当前元素的border
    console.log(box.clientLeft);//20
    //获取设置定位的父元素,若没有则返回<body>...</body>
    console.log(box.offsetParent);//<div class="wrap">...</div>
    //获取元素相对于其offsetParent的距离,即它们的border之间的距离
    console.log(box.offsetLeft);//此处就是box的margin值+wrap的padding值:100+30=130

6.scrollWidth/Height 滚动宽高
验证:

    //没有滚动条时,scrollWidth=clientWidth=元素的width+左右padding
    // console.log(box.scrollWidth);//450
    // 有滚动条时,scrollWidth=实际内容的width+左padding
    console.log(box.scrollWidth);//503(注释掉padding后变成453)

三.可读写:
1.scrollLeft/Top 设置元素滚动条的位置
验证:
https://www.w3school.com.cn/jquery/css_scrolltop.asp

2.event对象:(四种坐标)
2.1.event.clientX/Y 鼠标点击位置与浏览器可视区原点的距离
2.2.event.offsetX/Y 鼠标点击位置与事件源(如:元素div)原点的距离
2.3.event.screenX/Y 鼠标点击位置与电脑显示屏原点的距离
2.4.event.pageX/Y 鼠标点击位置与页面的距离
当没有滚动条时,pageX/Y实际上就是clientX/Y,
有滚动条时,要加上滚动条的宽高

在这里插入图片描述