• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Firefox übernimmt nicht die Änderung des Layouts

John the fishermen

Neues Mitglied
Hey,
habe aktuell folgendes Problem, wenn ich über den Firefox das Layout über eine Seite ändere. Wird diese Änderung nicht auf den Folgeseiten übernehmen. Es klappt aber bei allen anderen Browsern bisher die ich getestet habe (Opera, Edge, Chrome). Ich nutze phpstorm und wenn ich dort auf die Firefox Preview gehe funktioniert es. Dachte es hätte zuerst was mit dem Cache oder einer Firefox Einstellung zu tun, aber habe dort nichts behilfliches gefunden.
Hab leider im Internet nichts konkretes finden können über das Thema und hoffe ihr habt einen Rat. Vielen lieben Dank

Javascript:
function initThemeSelector() {
    const themeSelect = document.getElementById("themeSelect");
    const themeStylesheetLink = document.getElementById("themeStylesheetLink");
    const currentTheme = localStorage.getItem("theme") || "default";

    function activateTheme(themeName) {
        themeStylesheetLink.setAttribute("href", `css/${themeName}.css`);
    }

    themeSelect.addEventListener("change", () => {
        activateTheme(themeSelect.value);
        localStorage.setItem("theme", themeSelect.value);
    });


    themeSelect.value = currentTheme;
    activateTheme(currentTheme);
}
initThemeSelector();

Die Seite wo das Layout gesteuert werden soll:
HTML:
<!DOCTYPE html>
<html lang="de">
<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>Gear</title>
    <script src="js/startseite.js"></script>
    <link rel="stylesheet" id="themeStylesheetLink" href="css/default.css">
    <link rel="stylesheet" href="css/stylesheet.css">
</head>

<body>
<main class="themeSelect">
    <tr><td><a id="startseite"><h1>Theme Switcher</h1></a></td></tr>
    <tr>
   <td> <select id="themeSelect" class="themeSelect">
        <option value="default">Default</option>
        <option value="light">Light</option>
        <option value="ocean">Ocean</option>
        <option value="Goblin">Goblin</option>
        <option value="desert">Desert</option>
    </select>
   </td>
    </tr>
<!-------------------------------------ENDE------------------------------------------------->
</body>
<script src="js/layoutchanger.js"></script>
</html>

Die Hauptseite:
HTML:
    <!DOCTYPE html>
    <html lang="de">
    <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>Startseite</title>
        <link rel="stylesheet" id="themeStylesheetLink" href="css/default.css">
        <link rel="stylesheet" href="css/stylesheet.css">
    </head>
    <body>
    <table id="haupt">
        <tr><td><a id="startseite" href="startseite.html"><img src="img/startseite-logo.png" alt="logo"></a></td></tr>
        <form action="https://www.google.de/search" name="FORM" target="_blank">
            <tr>
                <td>
                    <input type="text" class="haupttext" name="q" id="suchtext" size="30" maxlength="50" hspace="20" vspace="20" placeholder="Test">
                    <input type="submit" class="search" style="display:none;"><br>
                 <p> Das ist ein Test</p>
                    <input type="button" value="Orange"">
                <td class="oberes-menü"><a href="Gear.html" target="_blank"><img src="img/icons/settings.ico" alt="icon"></a></td>
                </td></form>

    </body>
    <script src="js/layoutchanger.js"></script>
    </html>

CSS Code default Layout beispiel:
CSS:
:root {
    --primary: #E86D1F;
    --hintergrund: black;
    --akzent: whitesmoke;
}
 
Werbung:
Hallo basti, leider nein.
Ich kann dir aber magst meine Linkdateien geben wenn es dir hilft. Damit teste ich es momentan.
Probiere ob ich Sie dir per PN zusenden kann.
 
Werbung:
Zurück
Oben