遭遇したエラーと対処法について
エラー内容
Type 'HTMLCollectionOf<Element>' is not an array type or a string type. (プロパティ 'style' は型 'Element' に存在しません。)
エラーの出たコード
複数のDOM要素を取得した後に、ループを回してスタイルプロパティを取得、表示しようとした。
const wallList = document.getElementsByClassName('wall'); for (let i = 0; i < wallList.length; i++) { const left = wallList[i].style.left; // <- エラー発生!! console.log(left); }
const left = wallList[i].style.left;
の部分で表題のエラーが発生している。
エラー原因
document.getElementsByClassName
の戻り値の型はHTMLCollectionOf<Element>
になるが、Element
にはstyle
プロパティが存在しないためエラーになっている。
HTMLElementにキャストする
Element
からstyleプロパティのあるHTMLElement
にキャストすると解決する。
const wallList = document.getElementsByClassName('wall') as HTMLCollectionOf<HTMLElement>; for (let i = 0; i < wallList.length; i++) { const left = wallList[i].style.left; console.log(left); }
as HTMLCollectionOf<HTMLElement>
でキャストすることにより、エラーが消えた。