为什么这个简单的JavaScript代码不起作用
我有以下代码:为什么这个简单的JavaScript代码不起作用
function show(){
var a=document.getElementById('somediv').style.display;
a="block";
}
上面的代码不能正常工作,它的工作原理,如果我们使用
{
var a=document.getElementById('somediv');
a.style.display="block";
}
什么是错的,上面的代码?
为了理解这一点,您需要了解一些关于javascript分配的知识。
当您使用=运算符时,JavaScript中有两种赋值类型:按值赋值并按引用赋值。虽然有些语言可以让您选择在任何给定时间使用哪种类型的任务,但JavaScript不会给您一个选择。它有一套严格的规则,当它使用每个。
“按值分配”表示将数字3
或字符串"none"
指定为另一个变量。
“通过引用赋值”意味着指向另一个变量的指针被放置到您的新变量中,并且该对象内容的任何编辑都将反映在这两个位置。
对于像字符串,数字和布尔值等简单类型,JavaScript总是使用按值赋值。对于像数组和对象这样的类型,javascript总是按引用进行分配。这意味着,当你这样做:
var a=document.getElementById('somediv').style.display;
因为在display
属性的值是一个字符串,javascript中会使用分配的值和display
属性字符串的值复制到a
变量。一旦完成了该副本,a
变量与display
属性没有任何关联。您可以完全独立地更改display
属性和a
,因为它们每个都有自己的字符串副本。
所以,当你然后做:
a="block";
你只是分配一个新的字符串到a
变量,因为它没有任何与以前display
财产。
在另一方面,当你这样做:
var a=document.getElementById('somediv');
你到a
分配的对象。而且,JavaScript总是通过引用来分配对象。这意味着a
有一个指向somediv
对象的指针。没有副本,他们都指向完全相同的对象。所以,对任何引用所做的任何更改实际上都会改变同一个对象。所以,当你这样做:
a.style.display="block";
要更改实际的DOM对象。
我记住的规则是,分配(按值赋值)时,简单的类型,如数字,字符串和布尔值被复制。像数组和对象这样的复杂类型不会被复制,只有一个指向原始对象的指针被放入新变量(由引用分配)中,因此都指向完全相同的对象。
按值分配非常简单。通过引用进行分配可能既强大又偶尔会引起混淆,从而导致软件中的错误无法预测真正参考原始文件的后果。正因为如此,如果你想要一个对象的实际副本,你必须明确地创建一个对象的副本,因为分配不会为你做。另一方面,只要您了解它的工作原理,就可以引用复杂的对象,这些对象可以传递给用户。在javascript中,没有办法获得像数字,字符串或布尔型这样的简单类型的引用。它可以放入一个对象(作为一个属性),然后你可以传递一个对象的引用,但是你不能将一个引用传递给简单类型。
这里有几个例子:
// define person
var person = {height: 66, hair: "blonde"};
// assign the person object to bob
// because person is an object, the assignment is by reference
var bob = person;
// change bob's hair
bob.hair = "red";
// because assignment was by reference, person and bob are the same
// object so changing one changes the one original
alert(person.hair); // red
// define person
var person = {height: 66, hair: "blonde"};
// assign the person's height to a variable
// because height is a number, the assignment is by value (e.g. it's copied)
var myHeight = person.height;
// change both heights
myHeight = 72;
person.height = 60;
// because assignment was by value, myHeight and person.height are
// completely separate copies so changing one does not affect the other
alert(myHeight); // 72
alert(person.height); // 60
=
是一个赋值操作符。你正在放置一个变量内的东西。在第一种情况下,您将a
设置为display
的值。这是一个字符串,等于block
或none
等。
在第二种情况下,您将a
设置为对象somediv
。然后你设置它的显示属性。
第一种情况不起作用,因为您的代码说:设置字符串的显示属性。一个字符串没有显示属性,因此失败。这就像是在说:
'foobar'.style.display = 'none'
你写的功能失常的咒语。 根据您的代码document.getElementById('somediv').style.display
返回div的当前显示状态,所以它给出了设置显示块的错误。
您将直接设置DIV display属性这样
function show(){
var a=document.getElementById('somediv').style.display="block";
}
谢谢...这是非常有价值的信息。 – manoj 2012-04-07 06:31:51