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

pu82cl6c  于 2023-06-20  发布在  Java
关注(0)|答案(5)|浏览(123)

你知道为什么这个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函数。
谢谢!

q43xntqr

q43xntqr1#

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

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

jsFiddle example

(side注意:内联JavaScript通常是不受欢迎的)

xqk2d5yq

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,您应该考虑使用事件处理。

unhi4e5o

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有关。

93ze6v8z

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>
r1zhe5dt

r1zhe5dt5#

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

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

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

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

对我很有效

相关问题