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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

changing the properties of a class 2

Status
Not open for further replies.
crazyboybert

crazyboybert

Programmer
Jun 27, 2001
798
0
0
GB
hi guys,

this is just something i was wondering about and havent really seen or noticed anywhere before.

isit possible to change the properties of a css class dynamically.. and if so whats the syntax..

also can the class of an element be changed dynamically or would you have to change style properties individually?

cheers for any thoughts on this
 
Sort by date Sort by votes
well..lets see...

the only way i can think of to change the class dynamically would be just to declare it agian (document.write w/ javascript)..i don't know how that will work but it's worth a try..but you will have to do something like set a cookie then reload and write out the style from javascript based on the cookie

you can change a class with something like this (i think):

document.form.textBox.class = "myClass" -Greg :-Q

flaga.gif
 
Upvote 0 Downvote
Isn't it :

document.form.textBox.className ="myclass"

:) Nice one :)
 
Upvote 0 Downvote
no, because the syntax is

<input type=&quot;text&quot; name=&quot;textBox&quot; class=&quot;myClass&quot;> right?

so then you need to change the class atribute: document.form.element.class or am i missing something? -Greg :-Q

flaga.gif
 
Upvote 0 Downvote
The HTML attribute is class, but the Javascript attribute is className. niki had it correct. Tracy Dryden
tracy@bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
Upvote 0 Downvote
Thanks tsdragon.

Perhaps crazyboybert wanted to know how to change the class definition itself I think that can be done like:

classes.myClass.all.color = &quot;blue&quot;

classes.myClass.all.fontWeight = &quot;italic&quot;

etc.. etc...

Not 100% though.

Nice one :)
 
Upvote 0 Downvote
cheers guys thats exactly the sort of things i was looking for...plenty there for me to have a play around with..i had tried something like

document.for.textbox.class

but of course class is a restricted word in javascript so i had no success thanx again for pointers....

:-D
 
Upvote 0 Downvote
hi there
look what i found somewhere (but don't remember where, just as usual; but NOT here on TT, that is what i know..):

IE only (may be other dom browsers..)

var ss1=document.createStyleSheet();
//or
//var ss1=document.createStyleSheet(&quot;my.css&quot;);

ss1.addRule(&quot;div#Layer1&quot;,&quot;color:pink&quot;)
..
here is an example:
<html><head><title>dynamic styleSheets</title>
<script>
function checkit(){
var ss1=document.createStyleSheet();
with (ss1){
addRule(&quot;.clss&quot;,&quot;position:absolute&quot;)
addRule(&quot;.clss&quot;,&quot;left:400&quot;)
addRule(&quot;.clss&quot;,&quot;top:100&quot;)
addRule(&quot;.clss&quot;,&quot;width:100&quot;)
addRule(&quot;.clss&quot;,&quot;height:100&quot;)
addRule(&quot;.clss&quot;,&quot;background-color:pink&quot;)
addRule(&quot;.clss&quot;,&quot;visibility:visible&quot;)
}
var divobj=createDiv('Layer1')
divobj.className=&quot;clss&quot;
}

function createDiv(menuid){
var MenuObject;
MenuObject = document.createElement(&quot;DIV&quot;);
with(MenuObject){ id = menuid; }
document.body.appendChild(MenuObject);
return MenuObject;
}
</script>
</head>
<body>
<form >
<input type=&quot;button&quot; value=&quot;check for css&quot; onclick=&quot;checkit()&quot;>
</form>
</body>
</html> Victor
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
270
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
155
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
183
xwb
xwb
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
139
coldbohemia
coldbohemia
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
231
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top