Menu
I'm using JavaScript to enable/disable stylesheets using the following:
document.styleSheets[0].disabled = true|false;
This JS works fine, however I would like the stylesheet to be DISabled by default. Whilst I could use the JS above to immediately disable the stylesheet when the page loads, this obviously won't work for users who have JavaScript turned off.
I've tried doing this:
<link rel="stylesheet" href="style.css" disabled />
Whilst this disables the stylesheet, JavaScript (or at least the method I'm using) can't ENable it again. I've also tried all of these variations on the "disabled" attribute: disabled="disabled", disabled="true" and disabled=true, but these produce the same problem- I can't enable them again with JavaScript.
In short, I need a way to enable/disable an external stylesheet using JavaScript, but have that stylesheet disabled by default but not relying on JavaScript.
Any help would be greatly appreciated. Thanks.
N.B. This effect can be achieved by using two stylesheets, the second overwriting the first, therefore having no need for the "disabled" attribute. However, it's obviously preferable to only use a single stylesheet if possible, hence my question above.
740
The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
It is still possible to disable a link by following 3 steps: remove the href attribute so that it can no longer receive the focus. add a role="link" so that it is always considered a link by screen readers. add an attribute aria-disabled="true" so that it is indicated as being disabled.
A style sheet may be disabled by manually setting this property to true or if it's an inactive alternative style sheet. Note that disabled === false does not guarantee the style sheet is applied (it could be removed from the document, for instance).
You can use JavaScript's removeAttribute method for that.
<html>
<head>
<link id="first_style" rel="stylesheet" href="#" disabled />
<script type="text/javascript">
window.onload = function()
{
document.getElementById('first_style').removeAttribute('disabled');
}
</script>
</head>
<body>
<p>something</p>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
