js 点击按钮切换css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="toggleButton">Toggle Style</button>
    <div id="content">This is some content.</div>

    <script src="script.js"></script>
</body>
</html>

.content-default {
    background-color: white;
    color: black;
}

.content-alternate {
    background-color: black;
    color: white;
}

document.getElementById('toggleButton').addEventListener('click', function() {
    var content = document.getElementById('content');
    if (content.classList.contains('content-alternate')) {
        content.classList.remove('content-alternate');
        content.classList.add('content-default');
    } else {
        content.classList.remove('content-default');
        content.classList.add('content-alternate');
    }
});