grouping elements in CSS & Javascript

[brisray]

I think I've either misunderstood or missed something fundamental about grouping elements together.

Here's what I want to do...

The user picks a colour from a chart and depending on what radio button is checked the colour is applied to that set of elements. It works fine for the background colour, and links but have a few problems with a couple of other things.

I'd like headings, subheadings and, for want of a better phrase I call, emphasized text to be user definable. At the moment I've called each section of text by different IDs. So I've got <H3 ID=&quot;SubHd1&quot;> <H3 ID=&quot;SubHd2&quot;> and so on. The JavaScript to change the colour uses lines like

document.getElementById(&quot;SubHd1&quot.style.color=clrnum;
document.getElementById(&quot;SubHd2&quot.style.color=clrnum;

and so on. I'm sure there is a better way of grouping these elements together rather that doing this, but I can't find it. At the moment I have to keep track of how many elements of each type I'm writing.

Also, when the forground colour radio button is checked ALL the text changes to the new picked colour.

You can see what I mean and what is happening more clearly at

http://brisray.com/test/userclr2.htm

Any and all suggestions are most welcome.

Ray

 

[tlhawkins]

Hey Ray...

You can change the rules for a specific CSS style class. It's just kind of hard, or at least finiky. here is a function that will change the values...

function changeIt()
{
if (!document.styleSheets) return;
var theRules = new Array();
if (document.styleSheets[0].cssRules)
  theRules = document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
  theRules = document.styleSheets[0].rules
else return;
theRules[theRules.length-1].style.backgroundColor = '#000000';
}

the only way I know to change the Style Class Rules is by number. I've seen a way to call them by name like:
theRules['ClassName'].style.backgroundColor = '#FFFFFF';

but... I've never got it to work.
AND different browsers number the styles differently.
Netscape starts with 0 being the stylesheet so 1 in Netscape = 0 in IE.

I haven't used it much. that's all I know about it.

also... I saw the link on your site to
&quot;what my site (or anybody else's) must NOT look like&quot;

LOL... OMG... make it stop. That is, hands down, the worst looking site I have ever seen. Thanks for sharing. It makes us all feel better.



Travis Hawkins
BeachBum Software
travis@cfm2asp.com

http://www.beachbumsoftware.com

 

[brisray]

Thanks for the code. From what I read it seems that using variables with CSS isn't even being contemplated by the committee that decides these things.

That WebTek site has everything. Backgrounds that make the text unreadable, unfinished pages, script errors on every page, dead links, flashing neon colour schemes, even bad poetry. At only $12.50 I think I may let them redesign my site for me - but then again, perhaps not.

Ray

 

[brisray]

I'd tried the get elementbytag thing before and it always messed up. After reading a post in another forum I gave it one last chance and finally got the syntax figured out.

For anyone who's interested the code is

var tagname= new Array (document.getElementsByTagName(&quot;H1&quot);
for (count=0;count<=tagname.length; count++){
document.getElementsByTagName(&quot;H1&quot[count].style.color=clrnum;
}

getElementsByTagName returns a list of all the elements with the one specified in the parentheses - in this case H1. The list is in the form of an array so the variable has to be defined as an array.

The for loop goes through the array changing the style for each of the tags as it goes.

The code on

http://brisray.com/test/userclr3.htm

now uses this technique.

The code works in IE v6, Mozilla v1.4, Navigator v7.1 and Opera v7.11

Ray