This week's book giveaway is in the Servlets forum.
We're giving away four copies of Murach's Java Servlets and JSP and have Joel Murach on-line!
See this thread for details.
The moose likes Blatant Advertising and the fly likes change CSS rules dynamic with JavaScript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Other » Blatant Advertising
Bookmark "change CSS rules dynamic with JavaScript" Watch "change CSS rules dynamic with JavaScript" New topic
Author

change CSS rules dynamic with JavaScript

Zaeed McColin
Ranch Hand

Joined: Jan 13, 2009
Posts: 90
HI friends this is my first post
Alright today we want talk about change a CSS rule dynamic via javascript
ok we have 2 way to do it
1:a bad way
2:cool way (but not work in IE6-7)



first way:
OK lets start for first way
in first way we should count tags in document and then change the each style attribute one by one
so suppose that our default document has a CSS rule with this structure

&& now we want change the each
color tags to something like "#ee1166"
Alright we can use this js function to do it
check this out

in code
at the first search for >
elements and count them then in a for loop change the color of each one

So we have a bad problem here and what is this?

OK suppose that we will have to add some new
to document (create dynamic)
OK now we can do it with this guy


now if you use both of the functions in a document you will see have a big problem

and now put them all together

so for understanding copy this code in a blank HTML document and run it with your browser (such as FF)


Alright you saw that we have bad problem here and this is
when you click on change you see the change but after the add a link you see that new link has old CSS style color

OK you saw that this method not cool

Now lets start with second way to change CSS rule
2 cool way
NOTE: this method can not work in IE6-7, so please forget IE and download FireFox

Alright so look a bit in the fundamental of both way and + feature in way no.2
in first way we count a tags and change each tag color, it means our CSS rule has old rule still and in add new tags browser use of old rules

in second way: OK look when you load a page, it means that CSS rules is in your system (client-side) so you can access to it and change the rules of base

OK
like previous system we have a CSS rule like this


and now we have method for change the CSS rule (no each
rule tag)

this is


OK I should say something here
first note: look at this part

styleShetts[x]
why do we should use pointer [x] here?
because maybe we have 3 or 4 or x style sheet in our document
for example

NOTE: maybe we use of some style sheets with out link them to our document such as

so for this session we have this

so as you see reference and point the step by step
second Note: look at this part

cssRules[x]
you see we have use pointer here too because we CAN have more than 1 rule in each sheet
so with this example you will understand this guy


OK put them all together with a add function for add new
tag


So please see both ways and difference
and you have to do it and something like that for understand for ever

I'm really sorry for my bad English
if you have any question ask me!
good luck mi amigos


Open source
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: change CSS rules dynamic with JavaScript
 
Similar Threads
Can javascript modify CSS classes?
slow for loops inside javascript..
problem with css
JSF and CSS issues
document.styleSheets[0].cssRules is null