classList.toggle()でクラスの切り替えには正常に実装されているが、cssが反映されない

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8"/>
5  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6  <title>背景の切り替え</title>
7  <link rel="stylesheet" href="style.css"/>
8  <script src="main.js" defer></script>
9</head>
10<body>
11<main class="main">
12  <button class="theme-change-button">配色を変更</button>
13  
14  <h1>背景色が切り替わるHTML</h1>
15  
16</main>
17</body>
18</html>
19
20

css
1body {
2  font-size: 20px;
3  color: #2f3b4c;
4  background-color: #f9f9f9;
5  transition: 300ms all ease-out;
6}
7
8body.theme-dark {
9  background-color: #1e1e1e;
10  color: #fff;
11}
12
13body:before {
14  background-image: none;
15}
16
17.theme-change-button {
18  font-size: 12px;
19  width: auto;
20  color: initial;
21  background-color: white;
22  position: fixed;
23  top: 10px;
24  right: 10px;
25  margin-bottom: 10px;
26  padding: 10px;
27  cursor: pointer;
28}
29
30body.theme-dark .theme-change-button {
31  background-color: #1e1e1e;
32  color: #fff;
33}
34
35h1 {
36  font-size: 26px;
37  line-height: 1.5;
38  border-bottom: 1px solid #2f3b4c;
39  text-align: left;
40  transition: 300ms border-bottom-color ease-out;
41}
42
43body.theme-dark h1 {
44  border-bottom-color: white;
45}
46
47main {
48  height: auto;
49  background-color: transparent;
50  border-radius: 0;
51  max-width: 900px;
52}
53

Javascript
1let changebutton = document.querySelector('.theme-change-button');
2console.log(changebutton);
3
4changebutton.addEventListener('click',() => {
5
6document.body.classList.toggle('.theme-dark');
7
8});

このプログラムは、「配色を変更」ボタンをクリックすると背景色が切り替わるものです。
上記コードを実行してもcssが反映されません。

classList.toggle()による切り替えは上手く実装されています１。（ログを取って確認済み）

原因について分かる方がいたら、ご教示お願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

document.body.classList.toggle('.theme-dark');

.が余計です。

CSS
1document.body.classList.toggle('theme-dark');

投稿2021/07/18 10:25

itagagaki

総合スコア8402

asdfrgthyj

2021/07/18 10:31

ご返信ありがとうございます。無事に解決致しました。

asdfrgthyj

2021/07/18 10:32

引続きよろしくお願い致します。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

classList.toggle()でクラスの切り替えには正常に実装されているが、cssが反映されない

関連した質問