Closed Thread Icon

Preserved Topic: Changing style sheets w/ JS Pages that link to <a href="https://ozoneasylum.com/backlink?for=18009" title="Pages that link to Preserved Topic: Changing style sheets w/ JS" rel="nofollow" >Preserved Topic: Changing style sheets w/ JS\

 
Author Thread
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-02-2001 03:25

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?

linear
Paranoid (IV) Inmate

From: other places
Insane since: Mar 2001

posted posted 06-02-2001 04:17

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).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-02-2001 04:50

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.

linear
Paranoid (IV) Inmate

From: other places
Insane since: Mar 2001

posted posted 06-04-2001 21:29

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.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-04-2001 22:13

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>

linear
Paranoid (IV) Inmate

From: other places
Insane since: Mar 2001

posted posted 06-04-2001 22:29

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

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-04-2001 23:54

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

linear
Paranoid (IV) Inmate

From: other places
Insane since: Mar 2001

posted posted 06-05-2001 01:06

Excellent. I appreciate the help.

« BackwardsOnwards »

Show Forum Drop Down Menu