Why doesn’t setting the “disabled” property of a <link> tag via JavaScript work in IE 8?

Question

I am implementing a JavaScript function that enables/disables two CSS file of a website:

function switch_style ()
{
    var i, link_tag ;
    for (i = 0, link_tag = document.getElementsByTagName("link"); i < link_tag.length ; i++ ) 
    {
        if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) && link_tag[i].title) 
        {
            if(link_tag[i].title == "normal")
            {
                link_tag[i].disabled = true;
            }
            else if (link_tag[i].title == "contrast")
            {
                link_tag[i].disabled = false;
            }
        }
    }
    set_cookie( style_cookie_name, "contrast", style_cookie_duration );
}

As you can see, I enable or disable a link tag. This works in all browsers but not in IE8.

Is there a known reason?

Answer 1

what if you use removeAttribute('disabled') instead of setting it to false?

Answer 2

You're toggling the disabled property of link elements. As said on MDC,

[t]his attribute is non-standard and only used by some Microsoft browsers and must not be used by authors. To achieve its effect, use one of the following techniques:

• If the disabled attribute has been added directly to the page, do not include the <link> element instead;
• If the disabled attribute has been added via scripting, remove it from the DOM via scripting.

To remove a link element from the DOM, use element.removeChild.

Just a stupid example: if you want to remove the first link element on a page, just enter this JavaScript function in your browser's location bar:

javascript:(function(){var a=document.getElementsByTagName('head')[0];a.removeChild(a.getElementsByTagName('link')[0])})();

(I just tried it on SO, looked funny :)