Javascript：style.display：'block'不工作

pu82cl6c 于 2023-06-20 发布在 Java

关注(0)|答案(5)|浏览(124)

你知道为什么这个JavaScript只显示“block”而不显示（隐藏的）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>

我也试过'inline'，但结果相同。
返回false/true也失败。
onclick =''也失败。
我知道有风格。知名度等。但是我不需要/块。
此外，函数应该在链接内部工作，我不想调用外部JS函数。
谢谢！

JavaScript

来源：https://stackoverflow.com/questions/23859408/javascript-style-displayblock-doesnt-work

5条答案

按热度按时间

q43xntqr1#

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

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

jsFiddle example

(side注意：内联JavaScript通常是不受欢迎的）

赞(0）回复(0）举报 2023-06-20

xqk2d5yq2#

JavaScript表达式的值

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

是字符串'block'-想想你可以做a=b='something'的方式-在JavaScript中，赋值表达式的值是被赋值的值。
如果你尝试

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

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

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

(This结构通常用于小书签中）。但是，正如一些评论已经指出的那样，通常不赞成使用javascript: href，您应该考虑使用事件处理。

赞(0）回复(0）举报 2023-06-20

unhi4e5o3#

以下代码描述了您的问题：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 setter返回值input，所以document.getElementById('mydiv').style.display='block'将返回'block'，它等于href="javascript:'block'"。现在它引用about:blank并将其内容设置为block。
我不知道为什么浏览器引用和设置about:blank的内容，但我认为这与data-urls有关。

赞(0）回复(0）举报 2023-06-20

93ze6v8z4#

测试这个：

<html>
<body>

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

<span onclick="document.getElementById('mydiv').style.display = 'block'">Show my DIV</span>

</body>
</html>

赞(0）回复(0）举报 2023-06-20

r1zhe5dt5#

->我的问题是使用这个方法来显示html标签：

const helloDiv = document.getElementById('hello')
helloDiv.style.display = "block"

->解决方案是替换html标签：

document.getElementById('hello').style.display = "block"

对我很有效

赞(0）回复(0）举报 2023-06-20

我来回答

Javascript：style.display：'block'不工作

5条答案

相关问题

热门标签

最新问答