使用javascript更改標題的部分和邊框底部顏色的背景顏色

我試圖在點擊相應顏色的按鈕時更改標題的部分和邊框底部顏色的背景顏色。例如，當點擊藍色按鈕時，我希望該部分的背景顏色改變爲這種顏色：rgb（203,223,242）和標題的下邊框以改變爲rgb（225,255,255）。使用javascript更改標題的部分和邊框底部顏色的背景顏色

我已經嘗試過使用document.getElementsByTagName（'section'）並檢索節標記，但在此之後，當我嘗試用下面的一段代碼更改背景色時secColor.style.backgroundColor ='rgb（203 ，223,242）'沒有任何反應。

預先感謝您！

下面是HTML代碼的一部分：

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>List</title> 
     <link rel="stylesheet" href="StyleSheet.css"/> 
    </head> 
    <body> 
     <section> 
      <header> 
       <form> 
        <button>&#8362;</button> 
        <div> 
         <p>Colors</p> 
         <button id="blue" onclick="functionBlueSection('rgb(203, 223, 242)'); functionBlueHeader('(225, 255, 255)');"></button> 
         <button id="red" onclick="functionRedSection(); functionRedHeader();"></button> 
         <button id="yellow" onclick="functionYellowSection(), functionYellowHeader()"></button> 
        </div> 
        </form> 

      </header> 
       <ul> 
        <li> 
         <a href="#">List item</a> 
          <ul> 
           <li> 
            <a href="#">Sublist item</a> 
           </li> 
           <li> 
            <a href="#">Sublist item</a> 
           </li> 
           <li> 
            <a href="#">Sublist item</a> 
           </li> 
           <li> 
            <a href="#">Sublist item</a> 
           </li> 
          </ul> 
        </li>         
       </ul> 
     </section> 

     <!--Javascript--> 
     <script type="text/javascript"> 
      function functionBlueSection() { 
    var secColor = document.getElementsByTagName('section'); 
    secColor.style.backgroundColor = 'rgb(203, 223, 242)'; 
    } 

      var headColor = document.getElementsByTagName('header'); 
      function functionBlueHeader(){ 
       headColor.style.borderBottom = 'thin solid rgb(225, 255, 255)'; 
      } 

     </script> 

    </body> 
</html>

來源

2014-02-09 user2722790

請新增了jQuery項目添加<script src=""標籤（見如何添加jQuery的網站），並避免 - 內嵌的onClick屬性在再次使用。

$(document).ready(function() { 

$('#red').on("click",function(){ 
this.css("border","1px solid blue"); 
this.css("background","yellow"); 

}); 


$('#blue').on("click",function(){ 
this.css("border","1px solid blue"); 
this.css("background","yellow"); 
}); 

$('#yellow').on("click",function(){ 
this.css("border","1px solid blue"); 
this.css("background","yellow"); 
}); 

});

：

下面的代碼應該插入jQuery和換款的屬性，以期望的結果後，幫助你

來源

2014-02-09 19:29:10

使用javascript更改標題的部分和邊框底部顏色的背景顏色

回答

相關問題