Изменение цвета ссылки на основе функции стилей

Я новичок программист 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; 
}

источник

2009-09-25 Anonymous

С текущего кода вы должны быть в состоянии сделать это:

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

Если вы нашли себя делать такого рода задачи часто это будет стоить ваш время для изучения jQuery. Иногда это может упростить задачу и убрать большинство кросс-браузерных головных болей. Вот пример jQuery для конкретного примера, который вы задаете, изменяя цвет ссылки;

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

источник

2009-09-25 20:32:57

Спасибо. Совет/«rant» и ответ с благодарностью. – 2009-09-25 21:27:00

Все, что он хочет сделать, это изменить цвет. Он должен изучить основы, прежде чем полагаться на библиотеку, чтобы сделать все для него. В то время как JQuery классный, полезный и любимый веб-разработчиками по всему миру, новичкам следует поощрять копать глубже и изучать основные функции, сильные и слабые стороны javascript. +1 для правильного ответа, но я думаю, вы должны отредактировать, чтобы уменьшить известность вашего «разглагольства». – Joel

Ваш правый Джоэл, и я сам являюсь хорошим примером. Я сразу понял, как это сделать в jQuery, но мне нужно было посмотреть, как это сделать с помощью прямого javascript. Отредактировано, чтобы ответить на верху. –

легко

импорта два (или больше) таблицы стилей ...

<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

источник

2009-09-27 23:18:14 Peter

Изменение цвета ссылки на основе функции стилей

ответ

Смежные вопросы