Invision Power Services > Problem changing style using JavaScript

Full Version: Problem changing style using JavaScript

Invision Power Services > Community Forums > Community Web Design and Coding

Sebastian Mares

May 11 2005, 12:17 PM

Hi!

I currently have a problem with changing some style attributes of elements using JavaScript.
The website I am working on has a menu on the left side. The menu is a CSS-styled unordered list which has the fore- and background color defined in the CSS, as well as the border attribute. When a user clicks on a menu item, I would like the border to change to another color so he knows which page he is looking at. The site: http://www.maresweb.de/mwtest/
I tried to give an ID to a menu item and uses the onclick event to trigger a function which looks like this:

CODE

function changestyle(item)
{
document.getElementById(item).style.border = "1px solid #244c66";
}

However, nothing happens when clicking on the item. If I change the JS to

CODE

function changestyle(item)
{
document.getElementById(item).style.fontSize= "250%";
}

it works as expected. Any ideas how I can modify the border and/or colors of the clicked button?

Regards,
Sebastian

Nash12

May 11 2005, 12:57 PM

Did you try to set the border-properties one by one like:

CODE

document.getElementById(item).style.borderWidth = "1px";
document.getElementById(item).style.borderColor = "#244c66";
document.getElementById(item).style.borderStyle = "solid";

Perhaps this works.

Sebastian Mares

May 11 2005, 01:09 PM

Nope, it doesn't. "document.getElementById(item).style.color = "red";" or "document.getElementById(item).style.color = "#ff0000";" doesn't work either.

Nash12

May 11 2005, 02:20 PM

Hm... and how about:

CODE

document.getElementById(item).setAttribute("style", "1px solid #244c66");

Sebastian Mares

May 11 2005, 02:50 PM

Check this out.

"Home" and "Participate" should dynamically change on click.

Sebastian Mares

May 11 2005, 07:49 PM

Problem solved. Setting the ID to the anchor fixed the issue. However, only the first method works, not the second posted by Nash12.

Brendon Koz

May 12 2005, 03:49 PM

...are you sure it's working? Maybe you have it disabled, but when I click on "Participate", nothing happens.

Firefox 1.0.3
WinXP Pro SP2

Sebastian Mares

May 12 2005, 06:11 PM

That page changes very frequently since it's the copy on my local machine. Does "Home" appear with a dark border? If yes, it's working as expected. However, one question... If I set the border to dark blue using .style.border, the hover effect disappears. To avoid that, I tried creating a class "selected" with "a" and "a:hover" as childs and switch the class using JS, but it didn't work.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.