Javascript：style.display：'block'不起作用
[英]Javascript: style.display:'block' doesn't work
问题描述
any idea why this JavaScript just shows "block" and not the content of the (hidden) DIV? 
知道为什么这个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>
I also tried 'inline' but with the same result. 我也试过'内联'但结果相同。
return false/true also failed. return false / true也失败了。
onclick='' also failed. onclick =''也失败了。
I know there is style.visibility etc. but i need none/block. 我知道有style.visibility等但我不需要/块。
Also the function should work inside the link, i don't want to call an external JS-function. 此函数应该在链接内部工作，我不想调用外部JS函数。
Thanks! 谢谢！
3 个解决方案
解决方案1
5 2014-05-25 19:58:51
Because you want to use an onclick event handler, not the href attribute: 因为您想使用onclick事件处理程序，而不是href属性：
<a href="#" onclick="document.getElementById('mydiv').style.display='block';">Show my DIV</a>
(side note: inline JavaScript is usually frowned upon) （旁注：内联JavaScript通常不赞成）
解决方案2
3 2014-05-25 20:26:43
The value of the javascript expression javascript表达式的值
document.getElementById('mydiv').style.display='block'
is the string 'block' - think of the way you can do a=b='something' - in javascript the value of an assignment expression is the assigned value. 是字符串'block' - 想想你可以做a=b='something' - 在javascript中，赋值表达式的值是赋值。
If you try 如果你试试
<a href="javascript:'howdy'">link</a>
You'll find clicking the link navigates to a document containing just the word howdy - and the same thing is happening with your code. 你会发现点击链接导航到一个只包含单词howdy的文档 - 你的代码也会发生同样的事情。 You can stop this happening by adding an explicit void(0) , or by wrapping the code in an immediately-invoked function expression that doesn't return a value (ie implicitly returns undefined ), so: 您可以通过添加显式void(0)或将代码包装在不返回值的立即调用的函数表达式中（即隐式返回undefined ）来阻止这种情况发生，因此：
<a href="javascript:(function(){document.getElementById('mydiv').style.display='block';})()">
(This structure is commonly used in bookmarklets). （此结构通常用于书签）。 However, as several comments have already pointed out, in general the use of javascript: hrefs is frowned upon, and you should consider using event handling instead. 但是，正如几条评论已经指出的那样，一般来说javascript: hrefs的使用是不受欢迎的，你应该考虑使用事件处理。
解决方案3
0 2014-05-25 20:13:35
This code describes your problem: http://jsbin.com/jigiy/1 此代码描述了您的问题： 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>
Why is this happening: 为什么会这样：
Javascript setters return the value input, so document.getElementById('mydiv').style.display='block' will return 'block' , which is equal to href="javascript:'block'" . Javascript setters返回值输入，因此document.getElementById('mydiv').style.display='block'将返回'block' ，它等于href="javascript:'block'" 。 Now it refers to about:blank and sets its content to block . 现在它引用about:blank并将其内容设置为block 。
I'm not sure why the browsers refer and set the content of about:blank , but i think this has something to do with data-urls. 我不确定为什么浏览器会引用和设置about:blank的内容，但我认为这与data-urls有关。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.