[JavaScript]appendChildする前にgetComputedStyleは出来ない

createElementで生成したエレメントのCSS初期値を取得する際にgetComputedStyleを使ったのですが、これはappendChildする前はその値が取得されない様です。

恐らくですが、document上に要素とCSSが存在して初めて関連付けされるって事なのでしょうか。

ソースはこんな感じです。

.test {
 width:200px;
}
var element = document.createElement('div');
element.className = 'test';
console.log(document.defaultView.getComputedStyle(element, '').width); //取得できない
document.body.appendChild(element);
console.log(document.defaultView.getComputedStyle(element, '').width); //取得できる

この場合可変幅の要素を追加する際に親要素の横幅をstyleで変更したい場合、要素をappendChildしてからサイズを取得して可変する必要があるので、注意が必要でした。

個人的には入れ物(親要素)の大きさを中身(子要素)が入る大きさにしてから入れる、という方が処理の順序としてはしっくり来るのですが、今回は順序が逆になりそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>