JS中有网页、Dom元素的一些宽高、以及Event坐标的总结

最新推荐文章于 2024-05-02 18:12:22 发布

热爱前端的小菜鸟

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量247

点赞数

分类专栏： JS基础文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_59724696/article/details/132700465

版权

JS基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS中有关网页、Dom元素的一些宽高、以及Event坐标的总结

只读属性
可读可写属性
- 1、scrollTop与 scrollLeft
- 2、通过Element.style读取的 width、height 等标签行内属性
Event对象上的属性
Window、Document上面的一些宽高
- 1、网页可视区域宽度和高度
- 2、设备屏幕宽高

只读属性

1、clientWidth 与 clientHeight

这两个属性指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么这两个属性就是其原本的宽高减去滚动条的宽高，如果设置了元素的box-sizing属性为border-box，且设置了边框，则这两个属性的值为原本设定的width和height减去边框宽度*2再减去滚动条的宽度。

HTML：
    <div class="test"></div>
    
CSS:
	.test {
        width: 400px;
        height: 200px;
      }
JS:
	const element = document.querySelector('.test');
	console.log(element.clientWidth); //400
	console.log(element.clientHeight); //200
	
	element.style.padding = '10px';
	console.log(element.clientWidth); //420
	console.log(element.clientHeight); //220

	element.style.boxSizing = 'border-box';
	console.log(element.clientWidth); //400
	console.log(element.clientHeight); //200

	element.style.border = '5px solid black';
	console.log(element.clientWidth); //390
	console.log(element.clientHeight); //190

	element.style.overflow = 'scroll';
	console.log(element.clientWidth); //374
	console.log(element.clientHeight); //174

2、offsetWidth 与 offsetHeight

offsetWidth 和 offsetHeight （padding + content + border）是用于获取元素在网页中的可见宽度和高度的属性。它们是DOM（文档对象模型）属性，通常用于测量和定位HTML元素。

HTML：
    <div class="test"></div>
    
CSS:
	.test {
        width: 400px;
        height: 200px;
      }
JS:
	const element = document.querySelector(".test");
      // 正常情况
      console.log(element.offsetWidth); //400
      console.log(element.offsetHeight); //200

      // 设置padding
      element.style.padding = "10px";
      console.log(element.offsetWidth); //420
      console.log(element.offsetHeight); //220

      // 设置border
      element.style.border = "5px solid black";
      console.log(element.offsetWidth); //430
      console.log(element.offsetHeight); //230

      // 设置box-sizing
      element.style.boxSizing = "border-box";
      console.log(element.offsetWidth); //400
      console.log(element.offsetHeight); //200

      // 设置滚动条
      element.style.overflow = "scroll";
      console.log(element.offsetWidth); //400
      console.log(element.offsetHeight); //200

3、clientTop 与 clientLeft

在 JavaScript 中，元素的 clientLeft 和 clientTop 是用于获取元素的边框宽度（border-width）的属性。这两个属性表示元素内部的上边框宽度和左边框宽度，通常以像素（px）为单位。

HTML：
    <div class="test"></div>
    
CSS:
	.test {
        width: 400px;
        height: 200px;
      }
JS:
	const element = document.querySelector(".test");
     // 正常情况
      console.log(element.clientTop); // 0
      console.log(element.clientLeft); // 0

      // 设置border
      element.style.border = "5px solid black";
      console.log(element.clientTop); // 5
      console.log(element.clientLeft); // 5

4、offsetTop 与 offsetLeft

这对属性需要指的是元素本身与offsetParent元素的顶部边缘和左边缘的距离,这里解释一下offsetParent，offsetParent指的是当前元素的离自己最近的具有定位的（position不是static）父级元素，即包含块，如果找到该元素，那么该元素就是当前元素的offsetParent，如果从该元素向上寻找，找不到这样一个元素，那么当前元素的offsetParent就是body元素。而offsetTop和offsetLeft指的是当前元素，相对于其offsetParent顶部边缘和左边缘的距离，即当前元素的border到包含它的offsetParent的border的距离。

HTML：
   <div class="test">
        <div class="children"></div>
    </div>
    
CSS:
	.test {
        width: 400px;
        height: 200px;
        position: relative;
        border: 1px solid #000;
      }
    .children{
        width: 100px;
        height: 50px;
        margin-top: 10px;
        margin-left: 10px;
      }
JS:
	const father = document.querySelector(".test");
    const children = document.querySelector(".children");
    console.log(children.offsetTop); //10
    console.log(children.offsetLeft); //10

可读可写属性

1、scrollTop与 scrollLeft

scrollTop 和 scrollLeft 是用于获取或设置元素的滚动位置的属性

HTML：
    <div class="test">
      <div class="children"></div>
    </div>
    
CSS:
	.test {
        width: 400px;
        height: 200px;
        overflow: scroll;
      }
      .children {
        width: 500px;
        height: 300px;
        background-color: antiquewhite;
      }
JS:
	 const father = document.querySelector(".test");
     const children = document.querySelector(".children");
     father.addEventListener("scroll", () => {
        console.log('father.scrollTop：', father.scrollTop);
        console.log('father.scrollLeft：', father.scrollLeft);
      },{once: true})

在这里插入图片描述
可直接使用scrollTo方法设置它的滚动距离

	father.scrollTo(50, 100);

在这里插入图片描述
或直接赋值也同样可以设置

	 father.scrollTop = 100;
     father.scrollLeft = 100;

在这里插入图片描述

2、通过Element.style读取的 width、height 等标签行内属性

对于一个dom元素，它的style属性返回的是一个对象，这个对象中的任意一个属性是可读写的。例如 element.style.top,element.style.wdith等，在获取这些属性的时候，获取到的值通常是带有单位的(如px)，同时，对于这种方式获取元素的宽高，它只能够获取到该元素的行内样式，即通过在元素上面使用style标签书写的样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用element.currentstyle（IE）和element.getComputedStyle(IE之外的浏览器)。这些属性都是可读可写的，需要注意的是，给这些属性赋值的时候需要带单位的要带上单位，否则不生效。

HTML：
    <div class="test"> </div>
CSS:
	.test {
        width: 400px;
        height: 200px;
      }
JS:
	 const element = document.querySelector(".test");
     console.log(element.style.width); //输出空字符串
     
//给元素加上style样式
     <div class="test" style="width: 100px;">
     
//再次读取width属性
	 console.log(element.style.width); //100px

Event对象上的属性

在js中，对于dom元素的运动的操作通常都会涉及到event对象，在event对象上面有许多操作元素运动位置以及轨迹的属性，比如坐标这些，对于不同浏览器而言，event对象上面的属性可能存在差异。

1、clientX 和 clientY

这两个属性是当事件发生时，鼠标点击位置相对于浏览器（可视区）的坐标，即浏览器左上角坐标的（0,0），该属性以浏览器左上角坐标为原点，计算鼠标点击位置距离其左上角的位置。
在这里插入图片描述

2、offsetX 和 offsetY

这一对属性是指当事件发生时，鼠标点击位置相对于该事件源的位置，例如点击页面上某个Div元素，
则以该Div元素的左上角（0,0）的位置为原点，以鼠标点击位置到该原点的x、y的距离为坐标，距离包括padding但不包括border以及margin，如果设置Div的box-sizing属性为border-box那么距离就包括border的宽度。注意：ie，chrome，opera都支持该属性，唯独Firefox不支持该属性，Firefox中与此属性相对应的概念是，event.layerX和event.layerY。
在这里插入图片描述

3、pageX 和 pageY

这两个属性是事件发生时鼠标坐在位置相对于页面的位置（坐标），通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的，但是当浏览器出现滚动条的时候，pageX、pageY通常会大于clientX、clientY，因为页面还存在被卷起来的部分的宽度和高度。
在这里插入图片描述

4、screenX 和 screenY

screenX和screenY是事件发生时鼠标相对于屏幕的坐标，以设备屏幕的左上角为原点，事件发生时鼠标点击的地方即为该点的screenX和screenY值。
在这里插入图片描述

5、layerX 和 layerY

layerX,layerY 这两个属性是指事件发生时，鼠标距离元素本身或者元素的包含块左上角的位置，如果自身或者父元素都没有设置定位，那么该位置就是相对于body的左上角。
在这里插入图片描述

Window、Document上面的一些宽高

1、网页可视区域宽度和高度

const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

console.log("可视区宽度：" + viewportWidth);
console.log("可视区高度：" + viewportHeight);

在这里插入图片描述

2、设备屏幕宽高

const screenWidth = window.screen.width;
const screenHeight = window.screen.height; 

console.log("屏幕宽度：" + screenWidth);
console.log("屏幕高度：" + screenHeight);

在这里插入图片描述

本篇博客到此结束，如有不足或者错误地方欢迎大家在评论区留言纠正、补充，谢谢。

热爱前端的小菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS中有网页、Dom元素的一些宽高、以及Event坐标的总结

这两个属性指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么这两个属性就是其原本的宽高减去滚动条的宽高，如果设置了元素的box-sizing属性为border-box，且设置了边框，则这两个属性的值为原本设定的width和height减去边框宽度*2再减去滚动条的宽度。标签书写的样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用。
复制链接

扫一扫