2

http://jsfiddle.net/HW64y/をチェックしてください

<div id='box' class='frustratingBox'></div>

.frustratingBox{
    border:5px solid;
    border-color: #000000;
    border-radius:25px;
    width:100px;
    height:100px;
}

重要な行は、JS で単一のスタイル プロパティを変更しようとする試みです。

var FB = document.getElementById('box');
FB.style['border-color'] = "#009900";

問題: ボックスは、Chrome では期待どおりに緑色になりますが、FF ではスタイルシート ルールに従って黒色のままです。この違いの原因は何ですか?これらのブラウザーは、スタイル オブジェクトに対してどのように異なる処理を行っているのでしょうか? Zepto を使用すると、スムーズで簡単に修正できますが、ここで何が起こっているのかを正しく理解したいと思います。

4

2 に答える 2

3

スタイル プロパティ名は JavaScript ではキャメル ケースになっているため、次のようになります。

FB.style.borderColor = "#009900";

DOM 2 仕様には、有効なスタイル プロパティのリストが含まれており、すべてキャメル ケースの命名規則に従っています。変換なしで CSS プロパティ名をサポートするための参照はありません。新しい仕様/ドラフトではこれが変更されている可能性がありますが、適切なリファレンスが見つかりませんでした.

quoo の回答が提供するリンクは、それ がstyle['border-color']実際には WebKit と Trident でサポートされているが、Gecko や Opera ではサポートされていない、開発者にとって使いやすい非標準の代替アクセス方法であることを示しています。

于 2013-08-08T17:54:43.070 に答える
2

あなたがやっているように style['border-color'] を使用する代わりに、スタイルを変更する正しい方法は、プロパティ名をハイフンでつなぐ代わりにキャメルケースにすることです。したがって、正しい構文は次のとおりです。

FB.style.borderColor = "#009900";

参照: http://jsfiddle.net/33MZK/

どうやらそれはバグです。ここでの議論を参照してください: 、およびここ: http://lists.w3.org/Archives/Public/www-style/2012Feb/0655.html

于 2013-08-08T17:57:15.527 に答える