469,898 Members | 1,832 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,898 developers. It's quick & easy.

Apply style changes to a whole CSS class

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
3 16350
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
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
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.

Similar topics

7 posts views Thread by Louis. | last post: by
7 posts views Thread by Troy Heber | last post: by
144 posts views Thread by Natt Serrasalmus | last post: by
1 post views Thread by Hardy Wang | last post: by
4 posts views Thread by Mr Newbie | last post: by
3 posts views Thread by spolsky | last post: by
9 posts views Thread by =?Utf-8?B?QnJpYW4gQ29vaw==?= | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.