js中clientWidth、scrollLeft、offsetX等宽高度和位置的用法

js中clientWidth、scrollLeft、offsetX等宽高度和位置的用法文章目录前言一、clientWidth/clientHeight二、clientLeft/clientTop三、clientX/clientY四、scrollWidth/scrollHeight五、scrollLeft/scrollTop六、offsetWidth/offsetHeight七、offsetLeft/offsetTop八、offsetX/offsetY总结前言前端学习中会遇到的一些宽高度,位置的计算提示:以下是本篇文章正文内容,下面案例可供参考.b.

大家好,又见面了,我是你们的朋友全栈君。


前言

前端学习中会遇到的一些宽高度,位置的计算


提示:以下是本篇文章正文内容,下面案例可供参考

.box { 
   
      width: 100px;
      height: 100px;
      border: 20px solid #333;
      padding: 20px;
      margin: 20px;
}

一、clientWidth / clientHeight

是内容区域的宽高,不包括边框宽高度。

console.log(oBox.clientWidth) // 120

对于浏览器窗口或body:
则是可视宽高

console.log(document.documentElement.clientWidth);
console.log(document.body.clientWidth);

值会根据浏览器窗口大小的变化而变化

二、clientLeft / clientTop

取决于元素的左边框、上边框的值

console.log(oBox.clientTop);  // 20

三、clientX / clientY

鼠标位置距离当前浏览器窗口可视区域的x,y坐标

document.documentElement.onclick = function(e) { 
   
    console.log('clientX:' + e.clientX);
    console.log('clientY:' + e.clientY);
}

在这里插入图片描述

四、scrollWidth / scrollHeight

内容的实际宽高,包括有滚动条隐藏的部分

<style>
	body { 
   
            width: 2000px;
            height: 2000px;
        }
</style>
<script>
	console.log(document.documentElement.scrollWidth);
    console.log(document.documentElement.scrollHeight)
</script>

在这里插入图片描述
对于普通元素,scrollWidth、scrollHeight就是内容的实际宽高,不包括边框

console.log(oBox.scrollWidth);  // 140
console.log(oBox.scrollHeight)  // 140

五、scrollLeft / scrollTop

页面被卷去的宽度、高度,实际就是元素有滚动条的情况下滚动的大小

<style>
	body { 
   
            width: 2000px;
            height: 2000px;
        }
</style>
<script>
	window.onscroll = function() { 
   
        console.log(document.documentElement.scrollLeft);
        console.log(document.documentElement.scrollTop);
    }
</script>

可读,可写

六、offsetWidth / offsetHeight

元素的宽高,包含内边距和边框

console.log(oBox.offsetWidth)  // 180

七、offsetLeft / offsetTop

距离最近的具有参照物的元素左边和上边的距离
给oBox加个父级参照物oBig:

<style>
.box { 
   
      width: 100px;
      height: 100px;
      border-top: 40px solid #333;
      border-left: 20px solid #333;
      padding-top: 40px;
      padding-left: 20px;
      margin-top: 40px;
      margin-left: 20px;
      position: absolute;
      left: 0;
      top: 0;
}
        
.big { 
   
      width: 500px;
      height: 300px;
      position: relative;
      margin-top: 40px;
      margin-left: 20px;
      border-top: 40px solid #333;
      border-left: 20px solid #333;
 }
</style>
<script>
	window.onscroll = function() { 
   
        console.log('left:' + oBox.offsetLeft);
    	console.log('top:' + oBox.offsetTop);
    }
</script>

在这里插入图片描述

八、offsetX / offsetY

鼠标位置相对于事件源的X、Y坐标

<style>
.box{ 
   
   width: 200px;
   height: 200px;
   margin: 100px;
   background-color: #f00;
}
</style>
<script>
oBox.onmousemove = function(e){ 
    
   console.log(e.offsetX)
}
</script>

在这里插入图片描述

九、pageX / pageY

鼠标相对于文档的X、Y坐标,这2个属性不是标准属性,但得到了广泛的支持
与clientX、clientY有所不同:

document.documentElement.onclick = function(e) { 
   
    console.log('clientX: ' + e.clientX);
    console.log('pageX: ' + e.pageX)
}

2021/02/02
注意,这里页面有横向滚动条,clientX是距离窗口可视的距离,而pageX是距离文档的距离

总结

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163052.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号