ansaurus

Question

Changing a page element's style with javascript using the <a> tag and onclick?

Answer 1

+3 A:

<div id='block'>  <a href="#" onclick="Document.getElementById('block').style.display = 'none';">Hide</a>  </div>

Mike Sherov 2010-07-07 01:20:46

Answer 2

+5 A:

style is an object which properties are assigned directly. It's not like the HTML attribute. So what you want is:

document.getElementById('block').style.display = 'none';

Jason McCreary 2010-07-07 01:22:00

Thank you for the explanation.

AFK 2010-07-07 01:28:01

One question, will this not work if there are more elements within the div that aren't set to display = none? like a form or an image?

AFK 2010-07-07 01:45:32

No problem. Other CSS properties can be assigned as well. Just keep in mind that JS uses camel case where CSS uses dashes. For example, CSS `background-color` in JS `element.style.backgroundColor`

Jason McCreary 2010-07-07 01:47:05

Anything within that `div` will not be displayed, but only the div will have the `style.display = 'none'`.

Jason McCreary 2010-07-07 01:48:20

@Jason McCreary is right, the child elements will inherit the display none from thier parent.

John 2010-07-07 01:57:15

Answer 3

A:

...or with some help from jquery:

$('#block').hide();
// or:
$('#block').css('display','none');

Tahbaza 2010-07-07 01:25:22

Answer 4

A:

It is better to put the javascript in the <head> or better yet a separate file not the HTML. But since you have it in the HTML you could shorten your code to onclick="this.parentNode.style.display='none';"

qw3n 2010-07-07 01:40:23

Why, wouldn't the load times be increased if the webserver had to fetch yet another document?

AFK 2010-07-07 01:47:11

Maybe, you have an extra HTTP request, but the code will be about the same size so it isn't that big of a deal. If this is the only piece of javascript on your page its not really that important. However, the more code you have the harder it is to debug and if you want to change something it can be a real pain. I know this from personal experience. :P

qw3n 2010-07-07 02:00:54

you're right. I will probably do this to make it easier to code and just make an optimized version for speed later.

AFK 2010-07-07 02:26:11

ansaurus

tags:

views:

answers:

Changing a page element's style with javascript using the <a> tag and onclick?

related questions