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

-1

我做了一個網頁，我可以通過9個不同的按鈕來更改背景顏色，字體樣式和大小。如何控制CSS文件的某些部分？

問題1這裏是我爲每個按鈕使用一個css文件，和問題＃2是，例如，當將背景顏色更改爲藍色，並且我想將字體樣式更改爲cursive時，同時有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>

來源

2015-10-02 J. Doe

你的問題有點混亂，你能否詳細說明一下？「每個單一按鈕的1個css文件」是什麼意思，你是否爲每個不同的按鈕使用一個css文件？ –

你真的應該正確地關閉你的標籤，只是說。 – meskobalazs

我不確定到目前爲止發生了什麼問題，當你點擊加載新的樣式表時會發生什麼？它不起作用，或者你只是在尋找不同的方式來做到這一點？ – MJoraid

好了，不換樣式表文件，對於初學者。你可以：

對於不同的情況有不同的類，並在你的元素上用JavaScript設置這些類。這是即使在香草JS很容易，例如：

document.getElementById('myButton').classList.add("btn-red");
負載覆蓋樣式表動態，這將覆蓋現有的樣式。因此，不要使用完整的完整樣式表，只需將這些修改放入CSS文件中，然後在默認樣式表的之後加載。

我肯定會推薦第一種方法，它更加可靠和理智。大多數CSS框架以相同的方式工作，只需看看Bootstrap（twitter-bootstrap）。

來源

2015-10-02 10:39:22 meskobalazs

似乎是一種合乎邏輯的方法。我只希望他得到它。 – MJoraid

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

回答

相關問題