JS之offsetWidth的一些小缺陷

最新推荐文章于 2023-01-06 20:21:24 发布

云之前端

最新推荐文章于 2023-01-06 20:21:24 发布

阅读量987

点赞数

分类专栏：学习总结文章标签： offsetWidth缺陷 JS运动

本文链接：https://blog.csdn.net/qq_44586361/article/details/87536305

版权

学习总结专栏收录该内容

36 篇文章 0 订阅

订阅专栏

在我前面发的一些文章中，大家可能经常看到我使用offsetWith offsetHeight offsetLeft等，今天这篇文章，我将讲一下offsetWidth的一些缺陷。
在讲之前，做一个平时常用的物体变窄，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style>
#div1{width: 150px;height:150px;background: blue;}
</style>
<script>
	setInterval(function(){
    var oDiv=document.getElementById('div1');
    oDiv.style.width=oDiv.offsetWidth-2+'px';
	},30)
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

缺陷：加了border之后，物体反而变宽了

<style>
#div1{width: 150px;height:150px;background: blue;border:2px solid black;}
</style>

原因：
width:150px; border:2px
这时候offsetWidth:154px
oDiv.style.width=154-2+‘px’ //152明显宽度变大了
解决办法：
第一种：把width放在行间里面

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style>
#div1{height:150px;background: blue;border:2px solid black;}
</style>
<script>
	setInterval(function(){
    var oDiv=document.getElementById('div1');
    oDiv.style.width=parseInt(oDiv.style.width)-2+'px';  //此时的width只考虑width
	},30)
</script>
</head>
<body>
<div id="div1" style="width:150px"></div>    //把宽放到行间里面  (注:style只能取行间样式)
</body>
</html>

第二种：width还是在样式表里面，需要使用getStyle()

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style>
#div1{width:150px;height:150px;background: blue;border:2px solid black;}
</style>
<script>
function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj,false)[name];
	}
}
	setInterval(function(){
    var oDiv=document.getElementById('div1');
    oDiv.style.width=parseInt(getStyle(oDiv,'width'))-2+'px';//此时的width只考虑width
	},30)
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>