Menu
I am developing a website for someone, and the CSS styles I use require JavaScript (for the buttons that are used for a dropdown navigation bar on small screens). How can I use one stylesheet if the user has JavaScript enabled or use another one if JavaScript is disabled.
356
Two ways to do it:
Append the JavaScript-only stylesheets with JavaScript:
function appendStyle(url) {
var sheet = document.createElement("link");
sheet.setAttribute("href", url);
sheet.setAttribute("rel", "stylesheet");
sheet.setAttribute("type", "text/css");
document.head.appendChild(sheet);
}
If you don't mind loading the CSS for the JS and you just want to override your site's default appearance you can use a noscript tag instead:
<noscript>
<link href="your/no-js/stylesheet.here.css" type="text/css" rel="stylesheet">
</noscript>
You can use like this...
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="general css file" />
<noscript>
<link rel="stylesheet" href="CSS file for JS dissable" />
</noscript>
This works for me
36
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
