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

时间:2014-05-25 19:55:59

标签: javascript css

任何想法为什么这个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函数。

谢谢!

3 个答案:

答案 0 :(得分:5)

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

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

<强> jsFiddle example

(旁注:内联JavaScript通常不赞成)

答案 1 :(得分:3)

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: href的使用是不受欢迎的,你应该考虑使用事件处理。

答案 2 :(得分:0)

此代码描述了您的问题: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有关。