SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [resloved] Changing CSS style with JavaScript

    Hello guys!

    I want to write script in JavaScript that will change CSS style with radio buttons. Here is my code:

    HTML Code:
    <input type="radio" name="style" onclick="changeCSS(1);" />Style 1<br />
    <input type="radio" name="style" onclick="changeCSS(2);" />Style 2<br />
    Here is my JavaScript code:

    Code JavaScript:
    function changeCSS(stylCSS)
    {
    this.stylCSS = stylCSS;
     
    if (stylCSS == "1") { document.write('<link rel="stylesheet" href="style.css" type="text/css">'); }
    if (stylCSS == "2") { document.write('<link rel="stylesheet" href="style2.css" type="text/css">'); }
    }

    This isn't working... when I click button my page starts to loading forever...
    Please help, I'm JS beginner.
    Last edited by reQuorter; Oct 22, 2008 at 05:52. Reason: resloved

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Search sitepoint/google for style switching... You have to add the link elements to the head of the page.


  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    Search sitepoint/google for style switching... You have to add the link elements to the head of the page.
    I know, my head code:
    HTML Code:
    <head>
    <script type="text/javascript" src="changeCSS.js"></script>
    </head>
    And in changeCSS.js there is my JS code which I already gave you.
    I don't want to use any other code for switching CSS with JS, I want to write my own code.

    Nevermind, problem resloved:

    HTML Code:
    <head>
    <link id="stylesheet" rel="stylesheet" href="style.css" type="text/css">
    <script type="text/javascript">
    function changeCSS(stylCSS)
    {
    var ss=document.getElementById('stylesheet')
    
    if (stylCSS == "1")
     ss.href='style.css';
    else
     ss.href='style2.css';
    }
    </script>
    </head>
    <body>
    <input type="radio" name="style" onclick="changeCSS(1);" />Style 1<br />
    <input type="radio" name="style" onclick="changeCSS(2);" />Style 2<br />
    </body>

  4. #4
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Why restrict yourself to only 2 stylesheets?

    HTML Code:
    <head>
    <link id="stylesheet" rel="stylesheet" href="style.css" type="text/css">
    <script type="text/javascript">
    function changeCSS(stylCSS)
    {
    var ss = document.getElementById('stylesheet')
    ss.href = stylCSS;
    }
    </script>
    </head>
    <body>
    <input type="radio" name="style" onclick="changeCSS('style1.css');" />Style 1<br />
    <input type="radio" name="style" onclick="changeCSS('style2.css');" />Style 2<br />
    <input type="radio" name="style" onclick="changeCSS('style3.css');" />Style 3<br />
    </body>
    Ian Anderson
    www.siteguru.co.uk

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Let's use the concept of removing arguments and place the different parameters as value attributes in the html itself.

    Code javascript:
    <input type="radio" name="style" value="style1.css" onclick="changeCSS(this.value);" />Style 1<br />
    <input type="radio" name="style" value="style2.css" onclick="changeCSS(this.value);" />Style 2<br />
    <input type="radio" name="style" value="style3.css" onclick="changeCSS(this.value);" />Style 3<br />

    Now we can apply unobtrusive javascript techniques and remove the script from the html code completely.

    Code javascript:
    <input type="radio" name="style" value="style1.css" />Style 1<br />
    <input type="radio" name="style" value="style2.css" />Style 2<br />
    <input type="radio" name="style" value="style3.css" />Style 3<br />

    Instead, the script assigns the changeCSS function to the element.

    Code javascript:
    var els = document.getElementByName('style');
    var i;
    for (i = 0; i < els.length; i += 1) {
        els[i].onclick = changeCSS;
    }
    function changeCSS {
        var ss = document.getElementById('stylesheet');
        ss.href = this.value;
    }


    We should put scripts at the bottom of the page. That's one of the best practices for speeding up your web site.

    If instead you put the script at the head of the page, you will need to wrap it in some kind of window.onload function, like:

    Code javascript:
    window.onload = function () {
        ...
    }

    Now we can apply the law of demeter which is a principle of least knowledge. The loop shouldn't have to know about the changeCSS function, so lets move the loop off to a separate forEach function.

    Code javascript:
    forEach(document.getElementByName('style'), function (el) {
        el.onclick = changeCss;
    }
    function changeCSS {
        var ss = document.getElementById('stylesheet')
        ss.href = this.value;
    }
    function forEach(els, fn) {
        var i;
        for (i = 0; i < els.length; i += 1) {
            fn(els[i]);
        }
    }


    Now each function performs one simple job, making it easier to work with them and understand what they're supposed to do.

    Finally we can use self-invoking functions to achieve namespace closure so that the functions won't affect or be affected by any other code.

    Code javascript:
    (function () {
        forEach(document.getElementByName('style'), function (el) {
            el.onclick = changeCss;
        }
        function changeCSS {
            var ss = document.getElementById('stylesheet')
            ss.href = this.value;
        }
        function forEach(els, fn) {
            var i;
            for (i = 0; i < els.length; i += 1) {
                fn(els[i]);
            }
        }
    })();

    You may even want to take out that forEach function and place it in a common.js file so that it can be used for other scripts as well.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul - Why not just use Array.prototype.forEach, which seems to be implemented by Opera/Moz/Safari and you can just snatch the code from Mozilla docs for IE. This seems to be more consistent and faster than custom implementations.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The problem is that the forEach method is a version 1.6 feature whereas IE is still stuck in 1.3

    If should be possible to modify a forEach function to use the locally supported one if available, before reverting to a custom one
    In fact, Mozilla have some compatibility code for the forEach method just such a thing.

    Code javascript:
    if (!Array.prototype.forEach)
    {
      Array.prototype.forEach = function(fun /*, thisp*/)
      {
        var len = this.length;
        if (typeof fun != "function")
          throw new TypeError();
     
        var thisp = arguments[1];
        for (var i = 0; i < len; i++)
        {
          if (i in this)
            fun.call(thisp, this[i], i, this);
        }
      };
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •