CSS中点击按钮改变按钮背景色

html-css08

CSS中点击按钮改变按钮背景色,第1张

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .changeColor2Pink{

            background-color: pink

        }

        .resetBtn1Color{

            background: none

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var btn1=document.getElementById("btn1")

            var btn2= document.getElementById("btn2")

            btn1.onclick = function () {

                btn1.className="changeColor2Pink"

            }

            btn2.onclick = function () {

                btn1.className = "resetBtn1Color"

                btn2.className = "changeColor2Pink"

            }

        }

    </script>

</head>

<body>

<button id="btn1">按钮1</button>

<button id="btn2">按钮2</button>

</body>

</html>

貌似你写的有问题吧,不用写type="button"这句,因为本来就是button标签。

<button value="ch1" >选项一</button>

如果不加class或者id,可以这样写:

button{ background-color:#ff0000}

<button class="btn1" value="ch1" >选项一</button>

如果加个class,可以这样写:

.btn1{ background-color:#ffff00}