Question

我需要以不同的颜色（如样式切换器）加载不同的CSS文件。我想在加载DOM之前先加载color.css。我尝试过window.onload，但总是看到default.css之前已经加载。

<!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">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Style switcher</title>
    <!-- ===== Bootstrap CSS ===== -->
    <script>
        window.onload = function() {
                $('#theme').attr({
                    href: 'css/colors/red.css'
                });
            }
            // document.addEventListener("DOMContentLoaded", () => {
            //     $('#theme').attr({
            //         href: 'css/colors/red.css'
            //     });
            // });
    </script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- ===== Custom CSS ===== -->
    <link href="css/style.css" rel="stylesheet">
    <!-- ===== Color CSS ===== -->
    <link href="css/colors/default.css" id="theme" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <!-- ===== Main-Wrapper ===== -->
    <div id="wrapper">
        <!-- ===== Top-Navigation ===== -->
        <nav class="navbar navbar-default navbar-static-top m-b-0">
            <div class="navbar-header">
                <div class="top-left-part">
                    <a class="logo" href="index.html">
                        <b>
                          Test
                        </b>

                    </a>
                </div>
            </div>
        </nav>
   </div>
   
</body>

Answer 1

首先，您正在尝试使用jQuery，以使其无法使用。

除了更改链接的src外，您还可以使用正确的源动态创建一个链接标签。我利用IIFE来使函数直接执行已加载的函数

这是一个小片段，可使用正确的CSS源创建链接标记，您可以根据需要更改源。

<script>
  (function () {
    const style = document.createElement("link"); // Create link element
    style.rel = "stylesheet"; // Set relationship to be a stylesheet
    style.href = "css/colors/red.css"; // Set the path to the CSS file

    document.head.appendChild(style); // Add link tag to the head element
  })();
</script>

在加载整个页面之前加载自定义样式

1 个答案: