Question

当点击相应颜色的按钮时，我正在尝试更改标题的背景颜色和标题的边框底部颜色。例如，当单击蓝色按钮时，我希望该部分的背景颜色更改为此颜色：rgb（203,223,242）和标题的底部边框，以更改为rgb（225,255,255）。 / p>

我尝试过使用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 个答案: