Javascript 如何控制CSS文件的某些部分？_Javascript_Html_Css_Twitter Bootstrap

Javascript 如何控制CSS文件的某些部分？

javascript html css twitter-bootstrap

Javascript 如何控制CSS文件的某些部分？,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我制作了一个网页，在那里我可以通过9个不同的按钮改变背景颜色、字体样式和大小问题#1是我对每个按钮使用一个css文件，问题#2是，例如，当将背景颜色更改为蓝色，并且我想将字体样式更改为草书时，我不能同时激活2个，另一个将返回默认值有什么建议吗以下是我的CSS和HTML标记： <!DOCTYPE html> <html> <head> <link id="pagestyle" rel="stylesheet" type="text/css"

我制作了一个网页，在那里我可以通过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>


功能交换样式表（表）{
document.getElementById（'pagestyle'）.setAttribute（'href'，sheet）；
}





















SKRIFTTYPE skal endre seg
SKRIFTTYPE skal endre seg
SKRIFTTYPE skal endre seg

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

针对不同的情况使用不同的类，并使用JavaScript在元素上设置这些类。即使在vanilla JS中，这也很容易，例如：
```
document.getElementById（'myButton'）.classList.add（“btn红色”）
```


动态加载覆盖样式表，这将覆盖现有样式。因此，与其拥有全面、完整的样式表，不如将修改放在CSS文件中，并在默认样式表之后加载它


我肯定会推荐第一种方法，它更容易维护，更理智。大多数CSS框架的工作方式都是一样的，只需看看Bootstrap（）这个例子。
你的问题有点让人困惑，你能详细说明一下吗？你所说的“每个按钮1个css文件”是什么意思？你是否为每个不同的按钮使用css文件？你真的应该正确地关闭标记，只是说。我不确定到目前为止出现了什么问题，当你（单击）加载新样式表时会发生什么？它不起作用，或者你只是在寻找一种不同的方法来做这件事？似乎是一种合乎逻辑的方法。我只希望他能得到。