Question 45247 in Html Question posted in
Some basic documentation can be found here.

How to check which css stylesheet is currently loaded in the html file

I made a website that includes a simple menu (Home, Products, Change Themes, ABout Us). ‘Change Theme’ is a dropdown menu that has 2 more options (‘Default’, ‘Valentine’s).

Change Theme: (Default/Valentines).

When I click one of the options from the ‘Change Theme’ dropdown menu, for example the "Valentine’s" theme, the current page changes to a different theme. Now my homepage(index.html) is loaded with the valentine’s theme. When I click a new page from the menu, let’s say the "Products" how can I check which CSS stylesheet is currently loaded (current theme) so that I can load the correct theme for the new page.

Because now when I click a page from the menu it loads the default theme (css stylesheet).
For each html file I have 2 css files.
For example for the index.html I have the ‘mainstyle.css’ & ‘valentines.css’.

Here is some part of the code in the index.html. It’s mostly the function and the menu, since the rest of the code is other stuff.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flowers4U</title>

<!-- Link to the external Style Sheet -->
<link id="pagestyle" rel="stylesheet" type="text/css" href="css/mainstyle.css">

<script type="text/javascript">
    function change_theme(sheet){
        document.getElementById('pagestyle').setAttribute('href', sheet);
    }
</script>
</head>


<body>
    <div class="page">

    <!--Navbar Section-->
    <div class="navbar">
        <div class="inner-width">
            <img class="logo" src="img/Logo/logo.png" width="170px" height="60px">
            
            <!--Navbar Menu Section-->

            <div class="nav">
                <ul>
                    <li><a href="path/aboutUs.html">About Us</a></li>
                    <li><a id="mybtn" href="path/index.html" onclick="change_theme">Change Theme ▾</a></li>
                        <ul class="dropdown">
                            <li><a href="#" onclick="change_theme('css/mainstyle.css')">Default</a></li><br></br>
                            <li><a href="#" onclick="change_theme('css/valentines.css')">Valentine's</a></li>
                        </ul>
                    <li><a href="path/products.html">Products</a></li>
                    <li><a href="path/index.html">Home</a></li>
                </ul>

            </div>
        </div>
    </div>

I hope my question is clear.

Tags:

2

Answers


  1. 0 
    let mycss = document.querySelector('link[type="text/css"]').href;
    Login or Signup to reply.
  2. 0

    i advise your to make global variable in javascript and from the variable, make click event so you can save the theme that you want and when you move to another page.
    Make an load event in js that will check what is the saved theme and from there you can delete or add css style sheet.

    var current_theme = "Default"
document.getElementById("html").addEventListener("load", myFunction);

function myFunction() {
  if (current_theme == "Default"){
        element =  document.styleSheets[0].cssRules[0].style;
        element.removeProperty('text-decoration');
        // or any style property you want 
  }
}


// if you want also to disable style sheet i advise you to use this code
  function del_style() {
        document.getElementById("styles").disabled=true;
    }
    
    function add_style() {
        document.getElementById("styles").disabled=false;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search