cssで適用されているスタイルの確認方法

ボタンを押すとboxクラスに設定しているスタイルをコンソール画面に表示したいのですが、
「CSSStyleDeclaration」では設定しているはずのプロパティが全て空白になっています。
どこか別の所から確認ができるのでしょうか？

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>TODO-List</title>
6    <link rel="stylesheet" href="style.css" />
7  </head>
8  <body>
9    <div class="parent">
10      <div class="box"></div>
11      <button class="button">ボタン</button>
12    </div>
13    <script src="main.js"></script>
14  </body>
15</html>

css
1.parent {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%, -50%);
6}
7.box {
8  display: block;
9  width: 100px;
10  height: 100px;
11  background-color: lightblue;
12  border-radius: 5px;
13}
14
15.button {
16  cursor: pointer;
17}

js
1const box = document.querySelector(".box");
2const button = document.querySelector(".button");
3
4button.addEventListener("click", change);
5
6function change() {
7  console.log(box.style);
8}

よろしくお願いします。

退会済みユーザー

2021/10/17 03:25

ブラウザのディベロッパーツールでは分からないのでしょうか？

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

回答1件

ベストアンサー

要素のスタイルを取得するにはこのようにします。

JavaScript
1  const style = window.getComputedStyle(box);
2  console.log(style.getPropertyValue('width'));

投稿2021/10/17 03:29

itagagaki

総合スコア8402

bag_ai

2021/10/17 04:07

ありがとうございます。問題なく取得できました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

cssで適用されているスタイルの確認方法

関連した質問