如何使用一个button按钮切换两种css样式

Question

现在有一个按钮button
两个样式 white.css black.css
如何点击按钮时进行样式的切换呢？
用的是HBuilder X
按钮定义如下

<div class="container">
            <div class="row">
                <button type="button" class="button" onclick="change(2);">风格转换</button>
            </div>
</div>

样式的定义

<style type="text/css">
            /* 中屏幕 */
            @media screen and (min-width:992px) and (max-width:1200px) {
                .container {
                    width: 970px;
                }
            }

            /* 大屏幕 */
            @media screen and (min-width : 1200px) {
                .container {
                    width: 1170px;
                }
            }

            .container {
                /* background-color: #000000; */
                height: 50px;
                margin: 0 auto;
                text-align: right;
                background-color: #000000;
            }

            .button {
                background-color: #000000;
                color: #FFFFFF;
                height: 50px;
            }

        </style>

Answer 1

使用JS，先获取Dom，然后通过点击时间切换样式