Javascript Problem! Not changing the css style - Stack Overflow

admin管理员组

文章数量:1327740

I have this code in JavaScript:

function change() {

        document.getElementById("mem").className = 'gif';

}

The fig and gif are like this:

a.fig {

background: #FFFFFF;

}

a.gif {

background: #000099  ;
}

and the function is used like this

<a class ="fig" id ="mem" onClick="javascript:change()" href="users" >

Where the only difference between gif and fig in CSS is that they have different background colors. The problem is that the change is only noticeable in just a second and it is not permanent!

Any ideas?

I have this code in JavaScript:

function change() {

        document.getElementById("mem").className = 'gif';

}

The fig and gif are like this:

a.fig {

background: #FFFFFF;

}

a.gif {

background: #000099  ;
}

and the function is used like this

<a class ="fig" id ="mem" onClick="javascript:change()" href="users" >

Where the only difference between gif and fig in CSS is that they have different background colors. The problem is that the change is only noticeable in just a second and it is not permanent!

Any ideas?

• javascript

Share Improve this question Follow edited Feb 9, 2011 at 14:18 user113716 323k6464 gold badges453453 silver badges441441 bronze badges asked Feb 9, 2011 at 13:57 mathewmathew 18544 silver badges2020 bronze badges 9

• 1 How change() is called? Are you aware the if statement is meaningless? – Shadow Wizzard Commented Feb 9, 2011 at 13:59
• You're setting the same class ('gif') for both if statement possibilities. – djdd87 Commented Feb 9, 2011 at 14:00
• I'm confused... both if and else set the className to gif? Why have if-else then? – limc Commented Feb 9, 2011 at 14:01
• yes I know if statement is useless . Just tried something.. – mathew Commented Feb 9, 2011 at 14:01
• 1 Just add return false: onClick="change(); return false;" the thing is that without it, the class is changed then the page is redirected. – Shadow Wizzard Commented Feb 9, 2011 at 14:21

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 4

HTML:

<a id="mem" class="fig" href="users"> MEMBERS </a>

JavaScript:

var a = document.getElementById('mem');

a.onclick = function() {
    this.className = this.className == 'fig' ? 'gif' : 'fig';
}

Live demo: http://jsfiddle/eVQjB/

Note: in the demo, I return false; from the click handler to prevent the anchor from being activated.

function change() {
var mem = document.getElementById("mem");
    if (mem.className == 'fig') {
        mem.className = 'gif';
    }
    else {
        mem.className = 'fig';
    }
}

You may be looking for a different problem with JavaScript and styles, but if I understand your problem, you'll still need a different color for the anchor if it has been visited. You can let CSS do that for you:

#mem {
  background: #FFF;
}

#mem:visited {
  background: #009;
}

<a id="mem" href="users">Lead me to the promised land!</a>

you can try by following way

document.getElementById("idElement").setAttribute("class", "className");

IF still not working you r class is not chaning the style of your html element

Just add return false:

onClick="change(); return false;"

The thing is that without it, the class is changed then the page is redirected as this is the default behavior of anchor tag.

If you want to reload the page and change the class in the reloaded page, have such link:

href="?change=true"

Then in the server side code check for this flag and if true put different class. I'm not familiar with PHP but here is classic ASP version, hopefully similar enough to PHP:

<%
Dim sClassName
If Request("change")="true" Then
   sClassName = "gif"
Else  
   sClassName = "fig"
End If
%>
<a class ="<%=sClassName%>" id ="mem" href="?change=true">

本文标签： Javascript Problem Not changing the css styleStack Overflow