ブラウザ間の非互換性は楽しいですね。
思いがけない現象を次々と目撃できます。
現象 §
JavaScriptにて、CSSの色コードを変更した上で、その値を取得すると、同じ文字列が返らない場合がある。
再現プログラム §
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<LINK REL="stylesheet" TYPE="text/css">
<script><!--
function onLoad()
{
document.getElementById('body').style.backgroundColor = '#eeee22'
alert(document.getElementById('body').style.backgroundColor);
}
// --></script>
</head>
<body onload="onLoad()">
<p id="body">Test</p>
</body>
</html>
動作結果 §
Internet Explorer 6.0SP2と、Opera 8.5では、以下の値が出力されます。(設定値と同じ)
Firefox 1.07では以下の値が出力されます。(設定値と異なる)
ちなみに、以下の行を追加すると、3つのブラウザのいずれも"string"を返します。
alert(typeof(document.getElementById('body').style.backgroundColor));
補足 §
この問題の原因という以前に、backgroundColorの正しいあるべき挙動について未調査です。
これがバグなのか正当な動作であるかは未調査ということです。
ただ、いずれが正しいにせよ、どちらでも動作するように組まねばならないという状況に変わりはなく、結局やることは大差ないような気もします。
2005年10月27日追記 §
より詳細には以下を参照。(Motohikoさん、ご連絡感謝)
Motohikoの日記 [Bug] Bug 110762 - element.style.backgroundColor = '#00ff00'
