Help coderanch get a
new server
by contributing to the fundraiser
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
  • Mikalai Zaikin

change CSS rules dynamic with JavaScript

Ranch Hand
Posts: 90
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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

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

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

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

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
It is difficult to free fools from the chains they revere - Voltaire. tiny ad:
We need your help - Coderanch server fundraiser
    Bookmark Topic Watch Topic
  • New Topic