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

Question

我正在嘗試單擊相應顏色的按鈕時更改節的背景顏色和標題的邊框底部顏色。 例如，當單擊藍色按鈕時，我希望該部分的背景顏色更改為該顏色：rgb（203，223，242），標題的底部邊框更改為rgb（225，255，255）。

我嘗試使用document.getElementsByTagName（'section'）並檢索了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>

Answer 1

請在項目中添加jquery，並添加<script src=""標記（請參閱jquery網站以了解如何添加），並避免-不再使用嵌入式onClick屬性。

在插入jQuery並將屬性跟蹤到所需結果之后，以下代碼應為您提供幫助：

$(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");
 });

});

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

問題描述

1 個解決方案

解決方案1
0 2014-02-09 19:29:10

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

問題描述

1 個解決方案

解決方案1 0 2014-02-09 19:29:10

解決方案1
0 2014-02-09 19:29:10