Style Sheet Switcher

**mburt** · 02-14-2007, 12:51 AM

Wouldn't rel or rev also parse an error?

**jscheuer1** · 02-14-2007, 02:32 AM

Not for anchor links, they are valid attributes for those elements. Perhaps not for buttons either, I don't know. In any case it would break the real meaning of those attributes but, that is yet another (and some consider less relevant) matter. If Mike (mwinter) gets back and cares to comment on it, you will see what he thinks about co-opting the rel and rev attributes for scripting purposes. It still (if not ideal) is better than using a made up attribute that won't validate. Another approach would be to use a class and to assign via script the source as an object to those elements that have the corresponding class:

Code:

if(el.className=='green')
el.source='green.css')

Or, use the class name more directly like so:

Code:

obj[i].onclick = function() {
var othsrc = this.className+'.css';
css.change(othsrc);

That way the class name would be the filename, the script would simply add the extension of .css during processing. Class names are valid for virtually all elements and their intended meaning can encompass this use.

Compound class names could even be used:

HTML Code:

<span class="changestyle greencss">Green</span>

Code:

obj[i].onclick = function() {
var othsrc = this.className.split(' ')
for (var i_tem = 0; i_tem < othsrc.length; i_tem++)
if(othsrc[i_tem].indexOf('css')>-1)
break;
othsrc=othsrc[i_tem].replace(/css/, '.css');
css.change(othsrc);

**mburt** · 02-14-2007, 08:59 PM

Yeah, that's a good idea. But why have it jumbled up?
I think to just leave the filename would be better:

Code:

<span class="changestyle green.css">Green</span>

And to remove the RegExp code.

**jscheuer1** · 02-14-2007, 10:30 PM

I'm not certain if the . character is allowed in class names. Rather than check, I just sought to avoid it. But, I just checked, both the HTML and css validators don't seem to mind. FF, Opera and IE all see it as the element's className for scripting purposes but here:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.green.css {
color:red;
background-color:white;
}
</style>
</head>
<body>
<span class="green.css" onclick="alert(this.className)">Hi</span>
</body>
</html>

The text isn't red as one would expect so, there is something wrong with it having a dot.

**mburt** · 02-14-2007, 11:20 PM

Ah, ok. So your point is valid, but wouldn't something like:

Code:

<span class="green*css" onclick="alert(this.className)">Hi</span>

Be more appropriate? Leaving spaces would probably confuse the user.

**jscheuer1** · 02-15-2007, 04:58 AM

I was simply sketching out some ideas for possible inclusion/implementation. I in no way meant for my code to be a substitute for an overall, well thought out approach (which you already had the basics of). However, the bit with the space was to illustrate (as I think you know) that an element may have more than one class name assigned to it and that this might be useful if you are using one class name to determine which items to initialize and another to tell the script which style sheet to switch to when a given element is triggered.

**mburt** · 02-15-2007, 11:03 AM

Sorry john if I gave that impression, I was just saying that it may be a little more user-friendly to add the *. Thanks for the suggestion though, much appreciated.

Thread: Style Sheet Switcher

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions