Preserved Topic: Changing style sheets w/ JS (Page 1 of 1)

OK, I know I can change an element's style with getElementById, but what if I want to change something more generic, like the a:hover style sheet? How can I access that object through JS?

I *have* found a way to access it through the document.styleSheets object, IE only, but that's a bit of a weird way to do it since I actually have to specify which style sheet it's in, and which part of the style sheet it is, and stuff... I'd think there's an easier way to get at this. Anyone know?

document.getElementsByTagName('A') would return an array fo all the anchors, then you could loop through and manipulate the hover properties.

My current homepage is doing something similar (try the themes links). Don't know if NS has a similar method, but I suspect not.




[This message has been edited by linear (edited 06-02-2001).]

Interesting, I wasn't aware of that function.

Anyway, I answered my question myself, by using some for loops I found a way to search every style sheet on the page for a particular tag or class name.

function getSelectorStyle(seltext)
{
seltext = seltext.toUpperCase();
for (a=0; a < document.styleSheets.length; a++)
{
for (b=0; b < document.styleSheets[a].rules.length; b++)
{
if (document.styleSheets[a].rules[b].selectorText.toUpperCase == seltext)
{
return document.styleSheets[a].rules[b].style;
}
}
}
}

I believe that peice of code did the trick. It might not work actually, I just wrote it from memory, and if it does work, it's IE only.

Slime, could you follow up and post the code you have that does work? (Please?)

It turns out that my suggestion doesn't work, apparently because the :link and related are pseudoclasses. I think I just hit the same wall you did.

The following code should work in both IE and Mozilla. It enables you to access the style of any selector that you've already put into a style sheet (including classes or IDs). If it wasn't in the style sheet that the HTML page originally contained, then this functions will *not* work. This function only accesses styles that have already been defined in a style sheet.

var DOM = document.getElementById?true:false;
var MOZ = (navigator.product == "Gecko");
var IE = document.all?true:false;
var cssRules = "cssRules";
if (IE) cssRules = "rules";

function getStyleBySelector(seltext)
{
&nbsp;&nbsp;&nbsp;&nbsp;seltext = seltext.toUpperCase();
&nbsp;&nbsp;&nbsp;&nbsp;for (a = 0; a < document.styleSheets.length; a++)
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (b = 0; b < document.styleSheets[a][cssRules]length; b++)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.styleSheets[a][cssRules][b].selectorText.toUpperCase() == seltext)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return document.styleSheets[a][cssRules][b].style;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;return false;
}

Example:

<style type="text/css">
P.green {color:green; font-style:italic;}
TD {padding:3px;}
.invisible {visibility:hidden; display:none;}
</style>

<script language="JavaScript">
getStyleBySelector("P.green").fontStyle = "blue";
getStyleBySelector("TD").border = "1px solid #000";
getStyleBySelector(".invisible").display = "block";
</script>

I'm scared to ask, but have you tried it using A:link, A:hover, and the like?

Yup, and it works fine, again, provided that you had already put A:link and A:hover inside a style sheet to begin with.

Excellent. I appreciate the help.