By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,598 Members | 1,894 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,598 IT Pros & Developers. It's quick & easy.

Apply style changes to a whole CSS class

P: n/a
Hi,
I would like an event to trigger a change the style of all the elements that
belong to some CSS class.

I know it is possible to change the class of an element, for example with:
<script language=javascript>
function changeclass()
{document.getElementById(id).className="class_id"; }
</script>
<input type=checkbox onclick="javascript:changeclass()">

But this can only change one element. I would like to change the
"property:list" pairs of a CSS class, so that changes can apply to more
than one element.

Is it possible with javascript?
Sep 19 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
ASM
Waffeloo wrote:
Hi,
I would like an event to trigger a change the style of all the elements that
belong to some CSS class.

I know it is possible to change the class of an element, for example with:
<script language=javascript>
function changeclass()
{document.getElementById(id).className="class_id"; }
</script>
<input type=checkbox onclick="javascript:changeclass()">
function changeclass(elem,newClass)
{document.getElementById(elem).className=newClass; }
</script>
<input type=checkbox onclick="javascript:changeclass('div_1','spec_9')" >
But this can only change one element. I would like to change the
"property:list" pairs of a CSS class, so that changes can apply to more
than one element.

Is it possible with javascript?


I think you can't modiy properties of a class defined
(except, perhaps with IE and sheetStyle.rules ?)

You can catch all tags collection of the page
and for each tag with a certain class, change it :

var D = document.getElementsByTagName('*');
for(var i=0;i<D.length;i++)
if(D[i].className=='truc') D[i].className="trick";

of course you need 2 classes
of course you need your elements have a class
(it is not always)

you may also search lists elements and change their styles

var L = document.getElementsByTagName('UL')
for(var i=0;i<L.length;i++)
if(L[i].style.textDecoration=='none') D[i].style.textDecoration='underline';
--
Stephane Moriaux et son [moins] vieux Mac
Sep 19 '05 #2

P: n/a
Waffeloo wrote:
Hi,
I would like an event to trigger a change the style of all the elements that
belong to some CSS class.

I know it is possible to change the class of an element, for example with:
<script language=javascript>
function changeclass()
{document.getElementById(id).className="class_id"; }
</script>
<input type=checkbox onclick="javascript:changeclass()">

But this can only change one element. I would like to change the
"property:list" pairs of a CSS class, so that changes can apply to more
than one element.

Is it possible with javascript?


Yes, this thread should give you all you need:

<URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/3daffc9ed1c3afee/f800fd5529ed50b0?q=change+CSS+style+rule&rnum=6&hl =en#f800fd5529ed50b0>


--
Rob
Sep 19 '05 #3

P: n/a
Waffeloo wrote:
Hi,
I would like an event to trigger a change the style of all the elements
that belong to some CSS class.

I know it is possible to change the class of an element, for example with:
<script language=javascript>
function changeclass()
{document.getElementById(id).className="class_id"; }
</script>
<input type=checkbox onclick="javascript:changeclass()">

But this can only change one element. I would like to change the
"property:list" pairs of a CSS class, so that changes can apply to more
than one element.

Is it possible with javascript?


Thanks for the suggestions.
I found an elegant and dirty way: change the name of the class of the <body>
element, and have two sets of CSS rules:

body.class_A .flipflop { nice style }
body.class_B .flipflop { other style }

So I can change the style of many elements with a few lines of code.
Sep 19 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.