Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dynamically changing class definition 1

Status
Not open for further replies.
dc20

dc20

Technical User
Dec 15, 2003
95
US
Can an existing class get changed dynamically ?

If I have an existing class cl_sqr....

.cl_sqr { color:#000000; background-color:#FF7070; font-weight:bold; font-family: arial; }

is there a way to accomplish effectively.....

if opt==2 cl_sqr background-color is changed to #ff00ff
if opt==3 cl_sqr background-color is changed to #ffffff

(the className cl_sqr is retained but definition is revised)

 
Sort by date Sort by votes
Two quicks ways I can come up with to override a style attribute:

(1) declaring it explicitly in the HTML tag;
(2) changing the attribute using JavaScript.

Code: 
<html>
<head>
<style>
.cl_sqr { color:#000000; background-color:#FF7070; font-weight:bold; font-family: arial; }
</style>
<script>
function updateFourth()
{
 fourth.style.backgroundColor = '0000ff';
}
</script>
</head>
<body [b]onload='updateFourth();'[/b]>
<span class="cl_sqr" id="first">abc 123</span><br />
<span class="cl_sqr"  [b]style="background-color:ff00ff"[/b] id="second">def 456</span><br />
<span class="cl_sqr"  [b]style="background-color:ffffff"[/b] id="third">ghi 789</span><br />
<span class="cl_sqr"  id="fourth">jkl 101112</span>
</body>
</html>

Notice how there are no changes to the first SPAN. The second and third SPANs have overriding STYLE elements in their tags, but otherwise follow the style of their assigned CLASS. The fourth SPAN is updated using JavaScript in the BODY tag's onload event.

'hope this helps.

--Dave
 
Upvote 0 Downvote
I appreciate the reply, Dave. I would prefer to change the contents of className cl_sqr once rather than the span method, since I have lots of elements.

Without referencing id's of the specific element, I just want to modify className's definition.

To elaborate a little further, I have code references that assign the various classNames depending on the action of the user. So onclick on an object it might toggle between cl_sqr and another. So, what I see as working best for my code it not to modify the individual instances of the className usage, but to modify the className's attribute.

So depending on the user's preference of color, the contents of that className cl_sqr could be changed say from #FF7070 to #FF00FF by one global redefinition of className cl_sqr. That way every reference to that className would the same.

I think there's an element attribute function, is there a className attribute function ?




 
Upvote 0 Downvote
I found a similar discussion


If you look at WartookMan's example, what I'm wanting to do is change class .red to another shade of red dynamically.
It would still be called red but the class definition would be changed. Then all references to .red would have the new light color red.
 
Upvote 0 Downvote
Hey, it's me again! ;-) The following will probably only work with IE... I haven't been able to find a similar solution for Netscape/Opera etc., unless you use the "className" object and change it to "reddark" for all elements which currently use the "red" class.

Try the following:
Code: 
<style type="text/css">
.red {
	color: #ff0000;
}
</style>
<script type="text/javascript">
function UpdateClass(){
   // Access a rule in the styleSheet
   var oStyleSheet=document.styleSheets[0];
   // Remove the "red" rule and replace it with a new one
   oStyleSheet.removeRule(".red");
   oStyleSheet.addRule(".red","color: #990000;");
}
</script>
...
<span class="red">This should be in very bright red</span><br />
<span class="red">This is another line in bright red</span><br />
<button onclick="UpdateClass()">Change All Red to Dark Red</button>
BTW - the variable names will probably give the source away - directly from Microsoft's Developer Network:

Hope this helps.

Pete.


Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (LWWCM) Specialist
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote
thanks, Pete, that seems like the kind of thing I'm after, I'll give it a shot.


 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
345
lexer
lexer
AbidingDude
  • Locked
  • Question
Dynamically Create A Table
Replies
3
Views
348
AbidingDude
AbidingDude
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb
Xsi
  • Locked
  • Question
How to use arraylist from one class into another class + add data in Java
Replies
2
Views
250
Xsi
Xsi
ahm1985
  • Locked
  • Question
get the value of row before changing in table if cancel click
Replies
0
Views
168
ahm1985
ahm1985

Part and Inventory Search

Sponsor

Back
Top