[removed] style.display:'block' doesn't work

Question

any idea why this JavaScript just shows \"block\" and not the content of the (hidden) DIV?

        
                      

              相关标签:
       
      

Answer 1

The value of the javascript expression

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.

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. 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 (i.e. implicitly returns undefined), so:

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

Answer 2

This code describes your problem: 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'". Now it refers to about:blank and sets its content to 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.

Answer 3

Because you want to use an onclick event handler, not the href attribute:

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

jsFiddle example

(side note: inline JavaScript is usually frowned upon)