style.displayについて

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTMLのDOM要素をjavascriptで取得し、コンソールに出力させる練習をしています。
今、Q1とA1の要素を取得しコンソール上にdisplayを出力させようとしたところ何も表示されない減少に陥っています。これは何故なのでしょうか？
答えていただけると幸いです。宜しくお願い致します。

発生している問題・エラーメッセージ

console上に何も表示されない
通常なら'noneと表示される'？

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="style.css">
8    <title>クラスとインスタンス</title>
9</head>
10<body>
11    <div class="accordion" id='js-accordion'>
12        <a href="" class="accordion-trigger">Q1 aaaa</a>
13        <div class="accordion-contents">
14            A1 aaaa
15        </div>
16    </div>
17   
18 
19    <script src="main.js"></script>
20</body>
21</html>

css
1.accordion {
2	width: 500px;
3	margin: 0 auto;
4}
5
6.accordion-trigger {
7	margin: 0;
8	padding: 10px;
9	display: block;
10	background: #333;
11	color: #FFF;
12	border-top: 1px solid #fff;
13}
14.accordion-contents {
15	margin: 0;
16	padding: 10px;
17	border: 1px solid #ccc;
18	display: none;
19}

javascript
1(() => {
2  const $accordion = document.querySelector("#js-accordion");
3  const $trigger = $accordion.querySelector(".accordion-trigger");
4  const $content = $accordion.querySelector(".accordion-contents");
5
6  console.log($trigger.style.display);
7  console.log($content.style.display);
8})();

試したこと

検証ツールで出力

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

回答3件

styleプロパティは、要素のインラインスタイルと同様に設定したり取得したりするために使用します。

HTMLElement.style - Web API | MDN

ということですので、インラインスタイルではないものは取得できないはずです。

こちらを使ってみてはどうですか？

Window.getComputedStyle() メソッドは、アクティブなスタイルシートを適用し、それらの値に含まれる可能性のある基本的な計算を解決した後、要素のすべての CSS プロパティの値を含むオブジェクトを返します。

Window.getComputedStyle() - Web API | MDN

投稿2021/09/24 07:59

Lhankor_Mhy

総合スコア36163

javascript
1  console.log(getComputedStyle($trigger).getPropertyValue('display'));
2  console.log(getComputedStyle($content).getPropertyValue('display'));

投稿2021/09/24 07:59

yambejp

総合スコア115012

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

JavaScript
1console.log(window.getComputedStyle($trigger).getPropertyValue('display'));
2console.log(window.getComputedStyle($content).getPropertyValue('display'));