How to link external stylesheet only if javascript is enabled

StackOverflow https://stackoverflow.com/questions/11197881

  •  17-06-2021
  •  | 
  •  

Pergunta

I have a page that I want to be styled differently depending on whether javascript is enabled or not.

code:

<link rel="stylesheet" href="./css/main.css" type="text/css" />

<noscript>
    <link rel="stylesheet" href="./css/noscript.css" type="text/css" />
</noscript>

My problem is that noscript.css only overwrites some attributes, not all. So since main.css have a lot more styling in it it also applies. Only styles that are overwritten looks good. If I remove the link to main.css the page looks as I want it.

Is there any way to "reset" all previous style to default, or disable the link to main.css on noscript?

Thank you!

Foi útil?

Solução

You could do this:

<script>
  document.write('<link rel="stylesheet" href="./css/main.css" type="text/css" />');
</script>
<noscript>
    <link rel="stylesheet" href="./css/noscript.css" type="text/css" />
</noscript>

I'm normally not a huge fan of document.write(), but this is an example of it being the simplest thing to do. You could of course create the <link> tag and append it to the <head> or whatever if it's too distasteful.

Outras dicas

In case anyone comes across this old question, the best way I've found (no JS required) is:

<noscript>
<!--
</noscript>
<link rel="stylesheet" href="./css/main.css" type="text/css" />
<noscript>
-->
</noscript>

So if you have JS, the browser will see

<link rel="stylesheet" href="./css/main.css" type="text/css" />

and without JS, the browser will see

<!--
<link rel="stylesheet" href="./css/main.css" type="text/css" />
-->

var css = document.createElement('link');
css.rel = 'stylesheet';
css.type = 'etxt/css';
css.href = './css/main.css';
document.head.appendChild(css);
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top