offset的bug

最新推荐文章于 2021-08-29 00:00:22 发布

柏油

最新推荐文章于 2021-08-29 00:00:22 发布

阅读量273

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/75054192

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

案:1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {height: 200px; width: 200px;background: red;border: 1px  solid black;}
		</style>
		<script>
			setInterval(function(){
				var oDiv = document.getElementById("div1");
				
				oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
			},30);
		</script>
	</head>
	<body>
		<div id = "div1"></div>
	</body>
</html>

题意是让div的宽度逐渐减小，可结果是不断加大，原因是加了border ，用offsetWidth取宽度时将border也算入其中，故会加大。

改进:

案例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {height: 200px; width: 200px;background: red;border: 1px  solid black;}
		</style>
		<script>
			setInterval(function(){
				var oDiv = document.getElementById("div1");
				
				oDiv.style.width = parseInt(oDiv.style.width) - 1 + 'px';
			},30);
		</script>
	</head>
	<body>
		<div id = "div1" style="width: 200px;"></div>
	</body>
</html>

注意！style只能取行间样式

另一种改进方法：

案例3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {height: 200px; width: 200px;background: red;border: 1px  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')) - 1 + 'px';
			},30);
		</script>
	</head>
	<body>
		<div id = "div1"></div>
	</body>
</html>