addEventListener()とedgeの拡張機能SuperStylesで表示を変更したいのですが

Question

addEventListener()とedgeの拡張機能SuperStylesでWebの表示を変更したいのですがうまくいきません。

テスト用に作ったサイトhttps://konnichiwashijie.webnode.jp/の左上の画像を非表示にしようとしています。

window.addEventListener("load", function() {
var e=document.getElementsByClassName("thumbnail wnd-orientation-portrait");
e.style.display="none";
},false);

あと、クラス名のthumbnailとwnd-orientation-portraitの間にスペースがありますが、これはクラス名が２つついているということでしょうか。それともthumbnail wnd-orientation-portraitで１つの名前なのでしょうか。

Comments

[Lhankor_Mhy]

「うまくいきません」とは、具体的には何が起きていますか？

結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1

Answer 1

こんにちは。

よくある勘違いですが、getElementsByClassName() が返すものは要素ではないです。

一致する要素のリストであり、要素自身ではない

クラスが 'test' である最初の要素を取得する | Document.getElementsByClassName() - Web API | MDN

ですので、要素のつもりで .style と続けても上手くいかないです。

---

クラス名のthumbnailとwnd-orientation-portraitの間にスペースがありますが、これはクラス名が２つついているということでしょうか。

その通りです。

class グローバル属性 は、要素のクラスを空白区切りで並べたリストで、大文字小文字を区別します。

class - HTML: HyperText Markup Language | MDN

Comments

[Elephants]

おかげさまでできました！ありがとうございます！