Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Style not changing when changed via Javasript

Status
Not open for further replies.
CoffeeQuick

CoffeeQuick

Programmer
Jul 6, 2004
23
0
0
GB
Hi,

I am trying to change the display property of div via Javascript (to show and hide links).
This works fine when i use inline styles, but if i use a separate style sheet it does not work, can any one help?

Sample code

In-line:
Code: 
<div id="links" style="display:none"> .........

css:
Code: 
#links {
    display: none;
}

I have had the same problem before with other style properties, and have never managed to solve this problem, and had to resort to in-line styles, but as this div is on multiple pages i really want to use a style sheet.

Thanks.
 
Sort by date Sort by votes
Showing us your javascript would help us help you. Also, telling us what kind of error you are getting would help. Also, have you tried making two ids and changing ids?
 
Upvote 0 Downvote
The most common syntax for changing an element's style is:

Code: 
document.getElementById([i]'elementid'[/i]).style.display = [i]'validdisplayvalue'[/i];

This can also be done with classes:

Code: 
document.getElementById([i]'elementid'[/i]).className = [i]'yourClassName'[/i];

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
Here is my Javascript code

Code: 
function toggle() {

  division = document.getElementById("links");
  state = division.style.display;

  if (state == "none") {
     division.style.display = ""; }
     else {
     division.style.display = "none"; }
}

This works with in-line styles, but as soon as a use CSS it stops working!!
 
Upvote 0 Downvote
This is what you need to do...

[1] You need to set the display property to "block" instead of "".

[2] The css display property needs to be set first from Javascipt before it is able to read the property value back.

[3] For it to work this has to be done after the page has fully loaded.

Solution:

[1] Set up the css display property and Javascript so that the first time the toggle function is called the else part of the if statement will be invoked.

[2] This means the value will be set from Javascript.

[3] On the second call to the toggle function Javascipt can read back the value it previously set, and thus via the if statement will set to the alternate value.

Copy this code into a blank page and try it. You can alter it so that the div is invisible when the page loads by switching all the values of block and none.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>
<title>Toggle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="JavaScript" type="text/JavaScript">

function toggle() {

     division = document.getElementById('links');
     state = division.style.display;

     if (state == "none")
     { division.style.display = "block"; }
     else
     { division.style.display = "none"; }
     }

</script>

<style type="text/css">

     #links { display: block; }

</style>

</head>
<body> 
<div id="links" > You can hide or show this text... </div> 
...by clicking on <a href="javascript:toggle()">this link</a>!
</body>
</html>
 
Upvote 0 Downvote
Thank you 'empios' for your answer, that works fine, i've added onload=toggle() to the body tag so that the links are hidden to start with.

I take it then that any property set in an external CSS can not be changed by javascript.

Bit of a pain, but suppose i can work round it.

Thanks again.
 
Upvote 0 Downvote
If you want to control a css style using Javascript and the style isnt embedded in the document you will need to first set it with Javascript so that Javascript is able to see it.

With some experimentation this should usually be possible. I can't think of an example off the top of my head but if you think of another use/problem just post it :)

Finally, you'd be better swapping the words over rather than using onLoad...

Code: 
<script language="JavaScript" type="text/JavaScript">

function toggle() {

     division = document.getElementById('links');
     state = division.style.display;

     if (state == "block")
     { division.style.display = "none"; }
     else
     { division.style.display = "block"; }
     }

</script>

<style type="text/css">

     #links { display: none; }

</style>
 
Upvote 0 Downvote
Doh!!, I was obviously thinking to hard to end up with that onLoad.

Thanks again 'empios'.

John (Diokles).
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
218
spamjim
spamjim
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
127
waubain
waubain
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
60
pendle666
pendle666
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
57
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
60
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top