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を返したらそうなっていた、というのが原因です。