change CSS rules dynamic with JavaScript

Ranch Hand

Posts: 90

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>bad a change</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            a{font-family:monospace;color:#0099dd;}
        </style>
        <script type="text/javascript" >
            function changeA(){
                var t=document.getElementsByTagName('a').length;
                for(var i=0;i<parseInt(t);i++){
                    document.getElementsByTagName('a')[i].style.color="#11cc22";
                }
            }
            function addA(){
                var elem = document.createElement('a');
                var br=document.createElement("br");
                elem.innerHTML="We Well Rock you";
                document.getElementById('link').appendChild(elem);
                document.getElementById('link').appendChild(br);
            }
        ></script>
    </head>
    <body>
        <div>
            <span>this is a normal text and<br/><a> this is a link</a><br/>
                so we want change the 'a's tags color<br/>
                so now we ahve a lot of 'a' here:<br/>
                <span id="link">
                    <a>Slipnot</a><br/>
                    <a>Machine head</a><br/>
                    <a>linkin park</a><br/>
                    <a>evanecensce</a><br/>
                    <a>AC/DC</a><br/>
                <a>elvis</a><br/></span><br/>
                so now press the "change" button to change the color of 'a's to another
                AND press the "add link" button for add new link to the document
            </span><br/>
            <input type="button" value="change" onclick="changeA()" /><br/>
            <input type="button" value="add" onclick="addA()" />
        </div>
    </body>
</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>cool change</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            a{font-family:monospace;color:#0099dd;}
        </style>
        <script type="text/javascript" >
            function addA(){
                var elem = document.createElement('a');
                var br=document.createElement("br");
                elem.innerHTML="We Well Rock you";
                document.getElementById('link').appendChild(elem);
                document.getElementById('link').appendChild(br);
            }
            function changeCSS(){
                document.styleSheets[0].cssRules[0].style.color="#991177";
            }
        </script>
    </head>
    <body>
        <div>
            <span>this is a normal text and<br/><a> this is a link</a><br/>
                so we want change the 'a's tags color<br/>
                so now we ahve a lot of 'a' here:<br/>
                <span id="link">
                    <a>Slipnot</a><br/>
                    <a>Machine head</a><br/>
                    <a>linkin park</a><br/>
                    <a>evanecensce</a><br/>
                    <a>AC/DC</a><br/>
                <a>elvis</a><br/></span><br/>
                so now press the "change" button to change the color of 'a's to another
                AND press the "add link" button for add new link to the document
            </span><br/>
            <input type="button" value="add" onclick="addA()" /><br/>
            <input type="button" value="change CSS" onclick="changeCSS()" />
        </div>
    </body>
</html>

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

With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.