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

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

    client的一些属性:

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

    以下是举栗子验证环节:

    element.clientWidth

    1. 			div{
    2. 				width: 200px;
    3. 				height: 200px;
    4. 				background-color: pink;
    5. 			}
    6. 		</style>
    7. 	</head>
    8. 	<body>
    9. 		<div></div>
    10. 	</body>
    11. 	<script type="text/javascript">
    12. 		//client 宽度
    13. 		var div=document.querySelector('div');
    14. 		console.log(div.clientWidth)
    15. 	</script>

    宽度为200

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

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

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

     

     那么就变成了

     可见,clientWidth是包含padding值的

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

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

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

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

  • 相关阅读:
    关于官方提供的mindspore镜像mindspore-modelzoo
    [st表][贪心]Loop 2022杭电多校第6场 1012
    如何轻松查询分析多个快递单号物流到站派件延误件
    【.NET Core】深入理解IO之Path
    邻接表转化为逆邻接表
    _cpp利用红黑树封装实现map和set
    fplan-布局
    MySQL窗口函数
    EDF文件格式/规格说明
    nginx-ingress多控制器部署
  • 原文地址：https://blog.csdn.net/weixin_45904557/article/details/125435494