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?
Share Improve this question edited Feb 9, 2011 at 14:18 user113716 323k64 gold badges453 silver badges441 bronze badges asked Feb 9, 2011 at 13:57 mathewmathew 1854 silver badges20 bronze badges 9-
1
How
change()
is called? Are you aware theif
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
andelse
set theclassName
togif
? Why haveif-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
5 Answers
Reset to default 4HTML:
<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
版权声明:本文标题:Javascript Problem! Not changing the css style - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742227067a2436520.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论