views:

344

answers:

2

I am a novice Javascript programmer; any help would be greatly appreciated.

I have successfully implemented a script that allows users to switch from a "regular view" to a "high contrast view". The script is simply changing stylesheets.

I have also set up the script with a basic toggle: when a user clicks "High Contrast View" the link text changes to "Back".

However, I need to modify how the toggle works: rather than changing the link text, I need to change the link color.

I know that I can create a function with ".style.color", but I am not sure how to integrate this in to my current script.

My javascript is below.

Thanks for any help.

function load_all() {
    var cssval;

    cssval = get_cookie("cssclass");
    if (cssval == null || (cssval != "Normal CSS" && cssval != "High-Contrast-View")) {
        cssval = "Normal CSS";
    }
    set_stylesheet(cssval);
}

function switchStyle(newtitle) {
    set_stylesheet(newtitle);
    finish_stylesheet();
}

function set_stylesheet(newtitle) {
    var csslink;

    if (newtitle == null) {
        if (get_stylesheet() == "Normal CSS") newtitle = "High-Contrast-View";
        else newtitle = "Normal CSS";
    }
    for (var i = 0; (csslink = document.getElementsByTagName("link")[i]); i++) {
        if (csslink.getAttribute("rel").indexOf("style") != -1 && csslink.getAttribute("title")) {
            csslink.disabled = true;
            if (csslink.getAttribute("title") == newtitle) 
                csslink.disabled = false;
        }
    }
    set_cookie("cssclass", newtitle, 28);
}

function finish_stylesheet() {
    var nojsanchor, nojsspan, newtitle;

    newtitle = get_stylesheet();
    nojsanchor = document.getElementById("footer_nojslink");
    nojsspan = document.getElementById("contrastToggle");
    if (nojsanchor != null && nojsspan != null) {
        while (nojsspan.hasChildNodes())  
            nojsspan.removeChild(nojsspan.childNodes[0]);
        nojsspan.appendChild(document.createTextNode(newtitle == "Normal CSS" ?  "high contrast" : "back"));
        nojsanchor.href = "javascript:switchStyle('" + (newtitle == "Normal CSS" ?  "High-Contrast-View" : "Normal CSS") + "')";
    }
}

function get_stylesheet() {
    var i, a;

    for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) 
            return a.getAttribute("title");
    }
    return null;
}

function accepts_cookies() {
    document.cookie = "cookiecheck=true; path=/";
    var cookies = document.cookie;
    if (cookies.indexOf("cookiecheck") >= 0) 
        return true;
    else
        return false;
}

function set_cookie(name, value, days) {
    var expire;

    if (days > 0) {
        expire = new Date();
        expire.setDate(expire.getDate() + days);
    } 
    else 
        expire = null;
    document.cookie = name + "=" + escape(value) + (expire == null ? "" : ";expires=" + expire.toGMTString()) + ";path=/";
}

function get_cookie(name) {
    var cookielist, cookie;

    cookielist = document.cookie.split(";");
    for (var i = 0; i < cookielist.length; i++) {
    cookie = cookielist[i];
        while (cookie.charAt(0) == " ") 
            cookie = cookie.substring(1);
        if (cookie.indexOf(name + "=") == 0) 
            return unescape(cookie.substring(name.length + 1));
    }
    return null;
}
+3  A: 

With your current code you should be able to do this:

document.getElementById("footer_nojslink").style.color = "#A6A6A6";

If you find yourself doing this kind of task frequently it's going to be worth your time to learn jQuery. It can sometimes make things simpler, and takes away most cross browser headaches. Here is a jQuery example for the specific example you are asking, changing link color;

$('#footer_nojslink').css('color','#A6A6A6');
Corey Downie
Thanks. Advice/"rant" and answer are greatly appreciated.
All he wants to do is change the color. He should learn the basics before relying on a library to do everything for him. While JQuery is cool, and useful, and loved by web developers around the world, beginners should be encouraged to dig deeper and learn the underlying features, strengths and weaknesses of javascript. +1 for giving the correct answer, but I think you should edit to reduce the prominence of your "rant".
Joel Potter
Your right Joel, and I myself am a good example. I knew right away how to do it in jQuery, but I had to look up how to do it with straight javascript. Edited to put the answer at the top.
Corey Downie
A: 

easy

import the two (or more) stylesheets...

<head>
<link rel="stylesheet" href="style_1.css">
<link rel="stylesheet" href="style_2.css">
</head>

and then enable/disable them this way:

<script>
document.styleSheets[0].disabled=true;
document.styleSheets[1].enabled=true;
</script>

Now you can change the entire style of your site, not only the links.

https://developer.mozilla.org/En/DOM/Document.styleSheets

Pedro Ladaria