写一个让有背景色的文本自动增加长度的js代码所遇到的问题

最新推荐文章于 2024-09-23 17:12:42 发布

cutemurphy

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量196

点赞数

分类专栏：原生js学习文章标签： html function

本文链接：https://blog.csdn.net/cutemurphy/article/details/6629432

版权

原生js学习专栏收录该内容

57 篇文章 0 订阅

订阅专栏

写一个让有背景色的文本自动增加长度的js代码所遇到的问题：

错误代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style type="text/css">

p{background-color:blue; width:100px;}

</style>
</head>
<body>
<p id="f">我们都是好孩子</p>
</body>
<script type="text/javascript">
var len=document.getElementById("f").style.width;
var lenn=parseInt(len);
function move( ){

lenn+=10;

len=lenn+"px";

}
setInterval("move( )",1000);
</script>
</html>

思路是，用style.width取到有px单位的宽度值，然后用parseInt去掉单位，然后每秒调用函数move( )，给len赋予新值，重而改变文本的宽度。

错误有2个地方：

（1）首先var len=document.getElementById("f").style.width的方式取不到width的值，因为alert出来啥都没有。这个问题的解决办法就是将内部样式写成行内样式，即将width为100px，写成 <p id="f" width="100px">我们都是好孩子</p>，这样var len=document.getElementById("f").style.width就能取到值，而且值为100px。所以有时候不妨先alert( )进行调试，如果没取到值就要看看哪里需要调整。

（2）值引用和引用赋值(对象，数组都是引用赋值，所以改变其中之一，都会影响到其它)

var len=document.getElementById("f").style.width，将后者值赋予给了len，于是我认为只要len改变，document.getElementById("f").style.width就会相应改变，其实错误。

类似于var a=b，改变b不一定会改变a一样，赋值仅仅是相当于独立创建了另一个变量，所以一方的改变不会影响到另一方。所以：lenn+=10; len=lenn+"px";这里还要加一句： document.getElementById("f").style.width = len;否则p段落的宽度就是不会发生变化。

我觉得误区主要来源于:var a=2，然后我们要给a的值，直接var a=3就好了，所以就有一种“改了就马上变化的思维”。而var a=2与var len=document.getElementById("f").style.width又有所不同，虽然都是赋值行为，但前者右边是常量，后者右边是变量，所以要特别注意后者改了其中一个都不会影响到另一个，因为是独立复制了一份，独立开辟了一个内存空间。