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!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Use hover style for clicked style with JS? 1
- Thread starter Sleidia
- Start date
BillyRayPreachersSon
Programmer
You could try using the "active" and "focus" pseudo-classes instead of using JS:
Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Code:
el:hover,
el:focus,
el:active {
color: red;
background-color: blue;
}Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
- Thread starter
- #3
Hi Dan 
Hmmm ... isn't "active" supposed to be the state when the link is being clicked instead of the one after the link was clicked? I've tried this but it didn't work.
Anyway, what I've managed to do so far with javascript is capture the style onmouseover. So, I have a variable that contains "CSSStyleDeclaration". The problem is that I don't know how to apply this CSSStyleDeclaration to another element.
I've tried
document.getElementById(new_element).style = myvar_with_CSSStyleDeclaration
... but without success.
Any idea?
Thanks
Hmmm ... isn't "active" supposed to be the state when the link is being clicked instead of the one after the link was clicked? I've tried this but it didn't work.
Anyway, what I've managed to do so far with javascript is capture the style onmouseover. So, I have a variable that contains "CSSStyleDeclaration". The problem is that I don't know how to apply this CSSStyleDeclaration to another element.
I've tried
document.getElementById(new_element).style = myvar_with_CSSStyleDeclaration
... but without success.
Any idea?
Thanks
-
1
- #4
This is how you superimpose style overruling embedded stylesheet rules, in particular, the a:hover.
[tt]
<html>
<head>
<script language="javascript">
function doit(obj) {
var acss=document.styleSheets;
for(var i=0;i<acss.length;i++){
if (acss.cssRules) {
arules = acss.cssRules; //ff
} else if (acss.rules) {
arules = acss.rules; //ie
}
if (!arules) {return;} //do nothing
var scssStyleText="";
for (var j=0;j<arules.length;j++) {
if (arules[j].selectorText.toLowerCase()=="a:hover") { //ie A:active etc ff a:active etc
scssStyleText=arules[j].style.cssText;
break;
}
}
}
if (scssStyleText!="") {
obj.style.cssText=scssStyleText;
}
}
</script>
<style type="text/css">
/* arbitrary taken, say from ref [ignore][/ignore] */
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
</style>
</head>
<body>
<a href="[ignore][/ignore]" target="_blank" onclick="doit(this)">yahoo - with style superimposed</a><br />
<a href="[ignore][/ignore]" target="_blank">google - w/o style superimposed</a><br />
</body>
</html>
[/tt]
[tt]
<html>
<head>
<script language="javascript">
function doit(obj) {
var acss=document.styleSheets;
for(var i=0;i<acss.length;i++){
if (acss.cssRules) {
arules = acss.cssRules; //ff
} else if (acss.rules) {
arules = acss.rules; //ie
}
if (!arules) {return;} //do nothing
var scssStyleText="";
for (var j=0;j<arules.length;j++) {
if (arules[j].selectorText.toLowerCase()=="a:hover") { //ie A:active etc ff a:active etc
scssStyleText=arules[j].style.cssText;
break;
}
}
}
if (scssStyleText!="") {
obj.style.cssText=scssStyleText;
}
}
</script>
<style type="text/css">
/* arbitrary taken, say from ref [ignore][/ignore] */
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
</style>
</head>
<body>
<a href="[ignore][/ignore]" target="_blank" onclick="doit(this)">yahoo - with style superimposed</a><br />
<a href="[ignore][/ignore]" target="_blank">google - w/o style superimposed</a><br />
</body>
</html>
[/tt]
- Thread starter
- #5
Hello Tsuji
Always great to have you around!
As for the example you provided, my first concern is that my CSS files are very very big. So, I'm not sure it is a good idea to parse such big files for that purpose.
Isn't there a way to simply make use of CSSStyleDeclaration?
Meanwhile, I'v tried a different approach : create a specific class for this purpose and use document...className on click event. Works well but it produces unwanted changes when hover is called.
Thanks again
Always great to have you around!
As for the example you provided, my first concern is that my CSS files are very very big. So, I'm not sure it is a good idea to parse such big files for that purpose.
Isn't there a way to simply make use of CSSStyleDeclaration?
Meanwhile, I'v tried a different approach : create a specific class for this purpose and use document...className on click event. Works well but it produces unwanted changes when hover is called.
Thanks again
>...my first concern is that my CSS files are very very big.
It is very legitimate concern. I have forgotten at the last minute to revise by adding another break which may have a bearing on the speed.
[tt]
for(var i=0;i<acss.length;i++){
//etc etc
var scssStyleText="";
for (var j=0;j<arules.length;j++) {
if (arules[j].selectorText.toLowerCase()=="a:hover") { //ie A:active etc ff a:active etc
scssStyleText=arules[j].style.cssText;
break;
}
}
[blue]if (scssStyleText!="") {break;}[/blue]
}
[/tt]
But when we talk about speed, have to put into perspective of time scale on user-agent. Many lines above are not optimal such as string comparison with empty string rather than .length!=0 etc. Those are minor things. The main thing I had in mind is to establish the functionality and viability, else, I don't claim much.
>Isn't there a way to simply make use of CSSStyleDeclaration?
Together with the overall layout as I just used for illustration, I would think there should be some speedier referencing... only that these kinds of functionality are only sparsely used and the whole css referencing is still so fragile and full of proprietary/implementation specific that I cannot speak fluently enough. I would encourage you to explore the data model fuller to discover possible ways of more direct referencing.
It is very legitimate concern. I have forgotten at the last minute to revise by adding another break which may have a bearing on the speed.
[tt]
for(var i=0;i<acss.length;i++){
//etc etc
var scssStyleText="";
for (var j=0;j<arules.length;j++) {
if (arules[j].selectorText.toLowerCase()=="a:hover") { //ie A:active etc ff a:active etc
scssStyleText=arules[j].style.cssText;
break;
}
}
[blue]if (scssStyleText!="") {break;}[/blue]
}
[/tt]
But when we talk about speed, have to put into perspective of time scale on user-agent. Many lines above are not optimal such as string comparison with empty string rather than .length!=0 etc. Those are minor things. The main thing I had in mind is to establish the functionality and viability, else, I don't claim much.
>Isn't there a way to simply make use of CSSStyleDeclaration?
Together with the overall layout as I just used for illustration, I would think there should be some speedier referencing... only that these kinds of functionality are only sparsely used and the whole css referencing is still so fragile and full of proprietary/implementation specific that I cannot speak fluently enough. I would encourage you to explore the data model fuller to discover possible ways of more direct referencing.
- Thread starter
- #7
Thanks again Tsuji.
I hoped that maybe there would be a simple one line syntax that could apply a whole CSSStyleDeclaration to another element without having to parse it.
But obviously, it doesn't exist
Well, I'll have to pass on that one because I want to avoid spending even more time on this.
Have a great day
I hoped that maybe there would be a simple one line syntax that could apply a whole CSSStyleDeclaration to another element without having to parse it.
But obviously, it doesn't exist
Well, I'll have to pass on that one because I want to avoid spending even more time on this.
Have a great day
- Status
Similar threads
- Locked
- Question