web-dev-qa-db-ja.com

jQuery.css（）-marginLeft対margin-left？

JQuery.css（）を使用すると、同じ結果を得るために次の2つの関数を使用できると言われました。

$(".element").css("marginLeft") = "200px";

$(".element").css("margin-left") = "200px";

これはドキュメントで使用されているものなので、常にmarginLeftを使用しています。

http://api.jquery.com/css/

簡易CSSプロパティ（マージン、背景、境界線など）はサポートされていません。たとえば、レンダリングされたマージンを取得する場合は、$（elem）.css（ 'marginTop'）および$（elem）.css（ 'marginRight'）などを使用します。

JQueryでmarginLeftおよびmargin-leftが許可されているのはなぜですか？それは無意味なようで、CSS margin-leftに変換するためにより多くのリソースを使用しますか？

jquerycssmargin
45
Curt

jQueryの基礎となるコードはこれらの文字列をDOMに渡します。これにより、CSSプロパティ名またはDOMプロパティ名を非常によく似た方法で指定できます。

element.style.marginLeft = "10px";

以下と同等です：

element.style["margin-left"] = "10px";

JQueryがmarginLeftとmargin-leftを許可しているのはなぜですか？無意味なようで、CSSマージン左に変換するためにより多くのリソースを使用しますか？

jQueryは実際には特別なことをしていません。 .css()に渡すいくつかの文字列を変更またはプロキシする場合がありますが、実際には作業なしがあり、jQueryチームからどちらかの文字列を渡すことができます。 DOMが作業を行うため、余分なリソースは使用されません。

50
Andy E

たとえば、オブジェクトを使用して1つの関数呼び出しで複数のCSSスタイルを設定するときに使用できるオプションと一貫性を保つことができると思います。

$(".element").css( { marginLeft : "200px", marginRight : "200px" } );

ご覧のとおり、プロパティは文字列として指定されていません。 JQueryは、まだダッシュを使用したい場合、またはおそらくダッシュなしでは設定できないプロパティに対しても文字列の使用をサポートしているため、次のように動作します...

$(".element").css( { "margin-left" : "200px", "margin-right" : "200px" } );

ここに引用符がないと、プロパティ名にダッシュを含めることができないため、javascriptが正しく解析されません。

編集：JQueryは実際には左を区別していないように見えますが、代わりにDOMに指定されたプロパティを渡すだけで、おそらくstyle[propertyName];で

35
musefan

答えるのは遅いが、ダッシュ付きのcssプロパティがjqueryのオブジェクト宣言で機能しないことを誰も指定していない：

.css({margin-left:'200px'});//won't work
.css({marginLeft:'200px'});//works

したがって、jqueryコードでダッシュスタイルプロパティを使用する場合は、引用符を使用することを忘れないでください。

.css({'margin-left':'200px'});//works
6
Bhojendra Rauniyar

marginLeftが使用されている場合：

 $（ "div"）。css（{
 marginLeft： '12px'、
 backgroundPosition： '10px -10px'、
 minHeight： '40px' 
}）;

ご覧のとおり、ハイフンが付いている属性はキャメルケース形式に変換されます。上記の前のコードブロックのmargin-leftを使用すると、ハイフンを減算の操作として扱うため、JavaScriptが異常になります。

margin-leftが使用される場合：

 $（ "div"）。css（ "margin-left"、 "12px"）。css（ "background-position"、 "10px -10px"）。css（ "min-height"、 "40px "）;

理論的には、両方のコードブロックが同じことを行います。 2番目のブロックは文字列値であるため、2番目のブロックではハイフンを許可できますが、最初のブロックと比較すると、ややオブジェクトです。
これは理にかなっているはずです。

5
Karvoin Gabiloux

jQueryは、CSSの記述方法をサポートしているだけです。

また、ブラウザが値を返す方法に関係なく、それが理解されることを保証します

jQueryは、複数のWordプロパティのCSSおよびDOMフォーマットを同等に解釈できます。たとえば、jQueryは.css（ 'background-color'）と.css（ 'backgroundColor'）の両方の正しい値を理解して返します。

4
Jason Gennaro