Question

只能直接指定css样式。通过用户定义的变量传递不起作用。这是语法错误或css样式不能通过用户定义的变量传递

<!-- using variable doesnt work -->
<body>
<p id="ref" onclick="display()">hello</p>
<script>
function display(){
var d = document.getElementById("ref").style.display;
d = "none";
}
</script>
</body>

<!-- direct assignment works -->
<body>
<p id="ref" onclick="display()">hello</p>
<script>
function display(){
document.getElementById("ref").style.display = "none";
}
</script>
</body>

Answer 1

style.display不是对象。它是对象的属性，无法直接存储对属性的引用。

所以，当你这样做时：

var d = document.getElementById("ref").style.display;
d = "none";

所有，你正在做的是将字符串"none"存储到变量d中。它没有做更多的事情。

因为style是一个对象，所以你可以引用它：

var s = document.getElementById("ref").style;
s.display = "none";

虽然除了探讨事情如何在这里工作之外，没有理由在这里使用中间变量。所以，您也可以简化代码并执行：

document.getElementById("ref").style.display = "none";

值得一读的参考资料：Javascript by reference vs. by value

Answer 2

这是正常的。它与价值与参考有关。当您执行var d = document.getElementById("ref").style.display;时，您在新变量中创建了值的副本。这意味着style.display和d是两个变量，具有相同的值。因此，在此之后，当您更改d的值时，另一个副本的值保持不变。这就是场景1不起作用的原因，但场景2确实如此。

这是一个Stackoverflow主题，比我解释的更深入：Javascript by reference vs. by value。

Answer 3

您要在变量"display"中设置属性"d"的值，以便"d"包含文本值，例如元素的"none","block","inline-block" etc. not object。所以你不能通过变量设置属性。

javascripts对象不适用于分配CSS样式

3 个答案: