CODEWITHSUNDEEP
javascriptdom-events
Jeff
Jeff

Reputation:

Changing link color based on stylesheet function

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.

JavaScript:

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;
}

Upvotes: 0

Views: 860

Answers (2)

Corey Downie
Corey Downie

Reputation: 4769

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');

Upvotes: 3

Peter
Peter

Reputation: 5156

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

Upvotes: 0

Related Questions