Javascript：style.display：'block'不起作用

Question

知道为什么这个JavaScript只显示“阻止”而不是（隐藏）DIV的内容？

<html>
<body>

<div id="mydiv" style="display:none">TEST</div>

<a href="javascript:document.getElementById('mydiv').style.display='block';">Show my DIV</a>

</body>
</html>

我也试过'内联'但结果相同。

return false / true也失败了。

onclick =''也失败了。

我知道有style.visibility等但我不需要/块。

此函数应该在链接内部工作，我不想调用外部JS函数。

谢谢！

Answer 1

因为您想使用onclick事件处理程序，而不是href属性：

<a href="#" onclick="document.getElementById('mydiv').style.display='block';">Show my DIV</a>

jsFiddle例子

（旁注：内联JavaScript通常不赞成）

Answer 2

javascript表达式的值

document.getElementById('mydiv').style.display='block'

是字符串'block' - 想想你可以做a=b='something' - 在javascript中，赋值表达式的值是赋值。

如果你试试

<a href="javascript:'howdy'">link</a>

你会发现点击链接导航到一个只包含单词howdy的文档 - 你的代码也会发生同样的事情。 您可以通过添加显式void(0)或将代码包装在不返回值的立即调用的函数表达式中（即隐式返回undefined ）来阻止这种情况发生，因此：

<a href="javascript:(function(){document.getElementById('mydiv').style.display='block';})()">

（此结构通常用于书签）。 但是，正如几条评论已经指出的那样，一般来说javascript: hrefs的使用是不受欢迎的，你应该考虑使用事件处理。

Answer 3

此代码描述了您的问题： http ： //jsbin.com/jigiy/1

<div id="mydiv" style="display:none">TEST</div>
<a href="javascript:document.getElementById('mydiv').style.display='block',false;">Show my DIV</a>

为什么会这样：

Javascript setters返回值输入，因此document.getElementById('mydiv').style.display='block'将返回'block' ，它等于href="javascript:'block'" 。 现在它引用about:blank并将其内容设置为block 。

我不确定为什么浏览器会引用和设置about:blank的内容，但我认为这与data-urls有关。

Javascript：style.display：'block'不起作用

问题描述

3 个解决方案

解决方案1
5 2014-05-25 19:58:51

解决方案2
3 2014-05-25 20:26:43

解决方案3
0 2014-05-25 20:13:35

Javascript：style.display：&#39;block&#39;不起作用

问题描述

3 个解决方案

解决方案1 5 2014-05-25 19:58:51

解决方案2 3 2014-05-25 20:26:43

解决方案3 0 2014-05-25 20:13:35

Javascript：style.display：'block'不起作用

解决方案1
5 2014-05-25 19:58:51

解决方案2
3 2014-05-25 20:26:43

解决方案3
0 2014-05-25 20:13:35