1

次の JavaScript コードは、WebKit ベースのブラウザーでは完全に機能しますが、Firefox では機能しません。

canvas.style['left'] = "50%";
canvas.style['margin-left'] = "-" + (width / 2) + "px";

Firefox で要素を調べるとleft、上記のコードでプロパティが正常に設定されていることがわかりますが、要素にはmargin-left何らかの理由でプロパティがありません。

JavaScript から CSS スタイル プロパティにアクセス (読み取りまたは設定) する正しい方法が何であるかを理解できていないため、驚くべきことではありませんが、私は何か間違ったことをしているに違いないようです。この表記法を使用した例をいくつか見つけて、それらに従ってみましたが、結果はまちまちでした。

JavaScript から要素の CSS スタイル プロパティにアクセスする正しい/標準準拠の方法は何ですか?

4

2 に答える 2

1

いろいろ調べた結果、ほとんどの JavaScript 関係者にとって非常に簡単な次の基本的な事実が明らかになりましたが、JavaScript に非常に慣れていない他の人々の間では、私の混乱は珍しくないと思います。

  • JavaScript のすべてのオブジェクトは連想配列です。

オブジェクト プロパティには、次の 2 つの方法のいずれかでアクセスできます。

var o = new Object();
o.prop = "A string";
o['prop']; // => "A string"

オブジェクトを「通常の」連想配列として使用し、任意の文字列でキーを使用することは可能ですが:

o.['another-prop'] = 4 // Perfectly valid

そうすることで、ドット表記でアクセスできないプロパティを作成することになります。

o.another-prop // Parsed as `o.another` minus `prop`

これはおそらく次の理由によるものです。

  • DOM スタイルのプロパティは、JavaScript からアクセスするときに camelCase を使用します。

CSS で使用されるハイフン付きのプロパティ名を使用していました。これらは、私がテストしたすべての WebKit ベースのブラウザーで機能しましたが、それは WebKit が寛大だからだと思われます。

私が知る限り、JavaScript から CSS スタイル プロパティにアクセスする正しい方法は、プロパティ名をキャメル ケースに変換してから、ドット表記または括弧付き連想配列表記を使用することです。Firefoxで機能しなかった行は次のようになります

canvas.style['marginLeft'] = "-" + (width / 2) + "px";

また

canvas.style.marginLeft = "-" + (width / 2) + "px";

これは、私がテストしたすべてのブラウザーで機能しますが、私の発言が正しくないか、基準と一致していない場合は、ぜひお聞かせください。

于 2012-06-11T10:12:00.930 に答える
0

ダッシュと次の単語を大文字で削除、margin-left から marginLeft など

  obj.style.marginLeft = '10px';
于 2012-06-11T10:25:51.713 に答える