Question

我是JavaScript新手程序员;任何帮助将不胜感激。

我已经成功实现了一个脚本，允许用户从“常规视图”切换到“高对比度视图”。该脚本只是更改样式表。

我还使用基本切换设置脚本：当用户单击“高对比度视图”时，链接文本将更改为“返回”。

但是，我需要修改切换的工作方式：我需要更改链接颜色，而不是更改链接文本。

我知道我可以使用.style.color创建一个函数，但我不知道如何将它集成到我当前的脚本中。

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

Answer 1

使用您当前的代码，您应该可以执行此操作：

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

如果你发现自己经常做这种任务，那么学习jQuery是值得的。它有时可以使事情变得更简单，并且可以消除大多数跨浏览器的麻烦。下面是您要问的具体示例的jQuery示例，更改链接颜色;

$('#footer_nojslink').css('color','#A6A6A6');

Answer 2

易

导入两个（或更多）样式表......

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

然后以这种方式启用/禁用它们：

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

现在，您可以更改网站的整个风格，而不仅仅是链接。

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

根据样式表功能更改链接颜色

2 个答案: