473,796 Members | 2,473 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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=javasc ript>
function changeclass()
{document.getEl ementById(id).c lassName="class _id";}
</script>
<input type=checkbox onclick="javasc ript:changeclas s()">

But this can only change one element. I would like to change the
"property:l ist" 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 16511
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=javasc ript>
function changeclass()
{document.getEl ementById(id).c lassName="class _id";}
</script>
<input type=checkbox onclick="javasc ript:changeclas s()">
function changeclass(ele m,newClass)
{document.getEl ementById(elem) .className=newC lass;}
</script>
<input type=checkbox onclick="javasc ript:changeclas s('div_1','spec _9')">
But this can only change one element. I would like to change the
"property:l ist" 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.rule s ?)

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

var D = document.getEle mentsByTagName( '*');
for(var i=0;i<D.length; i++)
if(D[i].className=='tr uc') D[i].className="tri ck";

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.getEle mentsByTagName( 'UL')
for(var i=0;i<L.length; i++)
if(L[i].style.textDeco ration=='none') D[i].style.textDeco ration='underli ne';
--
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=javasc ript>
function changeclass()
{document.getEl ementById(id).c lassName="class _id";}
</script>
<input type=checkbox onclick="javasc ript:changeclas s()">

But this can only change one element. I would like to change the
"property:l ist" 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.c o.uk/group/comp.lang.javas cript/browse_frm/thread/3daffc9ed1c3afe e/f800fd5529ed50b 0?q=change+CSS+ style+rule&rnum =6&hl=en#f800fd 5529ed50b0>


--
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=javasc ript>
function changeclass()
{document.getEl ementById(id).c lassName="class _id";}
</script>
<input type=checkbox onclick="javasc ript:changeclas s()">

But this can only change one element. I would like to change the
"property:l ist" 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
2918
by: Louis. | last post by:
Hi all, One can connect a CSS style to a HTML tag. I want to create a text in the style footer. I can do: <font class="footer">Here is my great footer.</font> However, the <font> tag is depreciated in HTML 4.0 and I would like to stick to the rules as much as possible. I tried to create my own tag (see below), but that did not work. I do not want to use <p> or
7
7150
by: Troy Heber | last post by:
Can anyone tell me how to force an immediate apply of system based registry changes. I have an application written in C# that updates the registry. However I’m forced to logout and log back in for the changes to take effect. I need to figure out how to have an apply button (just like the one in Microsoft power tweak). Any help is greatly appreciated.
144
6979
by: Natt Serrasalmus | last post by:
After years of operating without any coding standards whatsoever, the company that I recently started working for has decided that it might be a good idea to have some. I'm involved in this initiative. Typically I find that coding standards are written by some guy in the company who has a way of coding that he likes and then tries to force everybody else to write code the way he likes it, not for any rational reason, but simply for the...
1
1985
by: Hardy Wang | last post by:
Hi all, I have a drop down list with some items, and one of the item contains very long text. I want to limit the width of the drop down itself, but when I click down arrow to pull down the content, I want to make <option> item wide enough to show all characters. <html> <head> <style type="text/css"> option.wide
4
1211
by: Mr Newbie | last post by:
//This is really fundemental, but I dont seem to be able to understand why my table text wont render as I want it. I have a style sheet which has many styles for all the standard tags etc. The body style for example will change when I change the BODY tag specified in the style sheet but the text within the table seems to be oblivious to this. In an attempt to change all the text in the table, I created a style with a selector name of...
38
2057
by: looping | last post by:
For Python developers around. >From Python 2.5 doc: The list of base classes in a class definition can now be empty. As an example, this is now legal: class C(): pass nice but why this syntax return old-style class, same as "class C:", and not the new style "class C(object):" ?
3
2046
by: spolsky | last post by:
hi, it is possible to apply multiple styles as shown in the following example. <STYLE TYPE="text/css"><!-- BODY { background-color:salmon; } P { margin-left:20px; } .clsCode { font-family:"Comic Sans MS"; font-size:10pt; color:navy;}
4
13450
by: planb | last post by:
Hi, I'd like to have a rollover like effect when a input field has the focus, any idea of how to do this with just CSS (easy enough with javascript)? What I'm thinking of is having a tips box show up next to the input field, but only when the field actually has focus. I was thinking if there's any way to make the focus apply to a
9
3015
by: =?Utf-8?B?QnJpYW4gQ29vaw==?= | last post by:
I want to open a text file and format it into a specific line and then apply color to a specific location of the text and then display it in a RichTextBox after all of this is done. I can do all of the above after the file is loaded into the RichTextBox, and I am trying to speed the process up by doing it in a temp file.
0
9680
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10456
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10230
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10012
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7548
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5442
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5575
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3731
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2926
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.