使用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更改标题的部分和边框底部颜色的背景颜色

回答

相关问题