JavaScript-----元素可视区client

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client的一些属性:

client系列属性	作用
element.clientTop	返回元素上边框的大小
element. clientleft	返回元素左边框的大小
element.clientWidth	返回自身包括padding 、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding 、内容区的高度，不含边框，返回数值不带单位

以下是举栗子验证环节:

element.clientWidth


			div{
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		//client 宽度
		var div=document.querySelector('div');
		console.log(div.clientWidth)
	</script>

宽度为200

那如果我们给他加一个10px的边框呢

可见,宽度还是200,没有发生变化

那他包不包含padding值呢,我们给他加一个10px的padding值

那么就变成了

可见,clientWidth是包含padding值的

所以clientWidth和我们之前学到的offsetWidth 最大的区别就是 clientWidth不包含边框

那么边框应该怎么获得呢?

以下两个值会给我们返回边框的大小

element.clientTop	返回元素上边框的大小
element. clientleft	返回元素左边框的大小

相关阅读:
JAVASE（复习）——异常
Python && JAVA 去除字符串中空格的五种方法
计算机毕业设计选题推荐-点餐微信小程序/安卓APP-项目实战
《所谓情商高，就是会说话》读书笔记
uniapp实现时间选择器
【面试经典150 | 双指针】两数之和
Go Web 开发之 Revel 框架搭建
把备考高项当成项目：我的信息系统项目管理师项目实施方案
【电脑讲解】电脑如何实现双系统
【Vue】创建项目

原文地址：https://blog.csdn.net/weixin_45904557/article/details/125435494