JavaScriptでElement.styleがnullになって焦った

JavaScriptで要素のstyleがnullになってしまう事態が発生しました。

// 正常
document.getElementsByTagName('p')[0].style
=> CSSStyleDeclaration {alignContent: "",…}

// あれ?
document.createElement('p').style
=> null

結論としては、Content-Typeがうっかりtext/xmlになっていたのが原因でした。

試してみましょう。

<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>sample</title></head>
<body><p>Hello</p></body>
</html>

コンソールからdocument.createElement('p').styleを入力すると、以下のようになりました。
Chrome以外では値が取れていません。

  • Chrome 46: CSSStyleDeclaration
  • IE11: undefined
  • Firefox 44: undefined
  • Safari 8: null

styleはDOM API CoreではなくCSS用拡張なので、XMLとして表示している場合には存在しなくて正常だと思うのですが、すべてのブラウザで表示上はHTMLモードであること、静的に存在する要素ではstyleが存在する(CSSStyleDeclarationが取得できる)ことから、気づくのに時間がかかった…

表示上はHTMLモードでAPI上はXMLモードみたいなこの挙動は仕様上どうなのでしょう、詳細調べてくれる親切な人がいたら歓迎です。

なお、HTMLの内容がXHTMLではない場合は、XMLエラーになります。xmlnsを指定しない場合は、XMLとして表示されます。

ちなみになんでtext/xmlになってしまったかというと、CocoaHTTPServerで何も設定しないでXHTMLを返したらそうなっていた、というのが原因です。

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。 高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。得意分野はWeb全般、Ruby on Rails、Androidアプリケーションなど。最近はBlinkと格闘中。軽度の資格マニアで、情報処理技術者試験(高度10区分)などを保有。

babaの書いた記事

週刊Railsウォッチ

インフラ

Rubyスタイルガイドを読む

BigBinary記事より

ActiveSupport探訪シリーズ