Question

我制作了一个网页，我可以通过9个不同的按钮更改背景颜色，字体样式和大小。

问题＃1这里是我为每个按钮使用一个css文件，问题＃2是当例如将背景颜色改为蓝色，并且我想将字体样式改为草书时，我不能同时激活2，另一个恢复默认。

关于如何做到这一点的任何建议？

以下是我的CSS和HTML标记：

<!DOCTYPE html>
<html>
<head>
    <link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
    <link href="style.css" rel="stylesheet">
    <script>
    function swapStyleSheet(sheet){
        document.getElementById('pagestyle').setAttribute('href', sheet);
    }
    </script>
</head>
<body>
    <div class="menu-wrap">
        <nav class="menu">
            <ul class="clearfix">
                <li>
                    <a href="#">CSS 1 <span class="arrow">&#9660;</span></a>
                    <ul class="sub-menu">
                        <li onclick="swapStyleSheet('')"><a href="#">Bytt skrift</a></li>
                        <li onclick="swapStyleSheet('skrift1.css')"><a href="#">Bytt farge</a></li>
                        <li onclick="swapStyleSheet('background1.css')"><a href="#">Bytt bakgrunnsfarget</a></li>
                    </ul>
    </div>
    <div class="menu-wrap">
        <nav class="menu">
            <ul class="clearfix">
                <li>
                    <a href="#">CSS 2 <span class="arrow">&#9660;</span></a>
                    <ul class="sub-menu">
                        <li onclick="swapStyleSheet('')"><a href="#">Bytt skrift</a></li>
                        <li onclick="swapStyleSheet('skrift2.css')"><a href="#">Bytt farge</a></li>
                        <li onclick="swapStyleSheet('background2.css')"><a href="#">Bytt bakgrunnsfarget</a></li>
                    </ul>
    </div>
    <div class="menu-wrap">
        <nav class="menu">
            <ul class="clearfix">
                <li>
                    <a href="#">CSS 3 <span class="arrow">&#9660;</span></a>
                    <ul class="sub-menu">
                        <li onclick="swapStyleSheet('')"><a href="#">Bytt skrift</a></li>
                        <li onclick="swapStyleSheet('skrift3.css')"><a href="#">Bytt farge</a></li>
                        <li onclick="swapStyleSheet('background3.css')"><a href="#">Bytt bakgrunnsfarget</a></li>
                    </ul>
    </div>
    <p class="skrift">skrifttypen skal endre seg.</p>
    <p class="skrift">skrifttypen skal endre seg.</p>
    <p class="skrift">skrifttypen skal endre seg.</p>
</body>
</html>

Answer 1

好吧，不要为初学者交换样式表文件。你可以：

针对不同情况使用不同的类，并使用JavaScript在元素上设置这些类。即使在vanilla JS中也很容易，例如：

document.getElementById('myButton').classList.add("btn-red");
动态加载覆盖样式表，它将覆盖现有样式。因此，不要使用完整的完整样式表，只需将修改放在CSS文件中，然后在默认样式表后加载。

我肯定会推荐第一种方法，它更具有可维护性和理智。大多数CSS框架的工作方式相同，例如，只需看一下Bootstrap（twitter-bootstrap）。

如何控制CSS文件的各个部分？

1 个答案: