2012-02-03 5 views
2

とCSSの設定:プロPHPとjQuery:CSSの速記のproperties.3アンは、jQueryのの ボーナスはCSSを使用してCSSプロパティを設定する機能である値が返さヒント■jQueryとから速記

を追加します 略語は、基本的なJavaScriptを使用して動作しません。 jQueryのAPIリファレンスから

短縮形CSSプロパティ(例えば余白、背景、境界線は) はサポートされていません。たとえば、レンダリングされたマージンを取得する場合は、 は$(elem).css( 'marginTop')と$(elem).css( 'marginRight')を使用しますので、 がオンになります。

私は混乱していますが、cssの略語は設定できますが、読むことはできませんか?もちろん、私は単にスタイルシートを使用しますが、質問は学問的啓発のためです。

+0

そうです。 CSSの短縮形を使用してプロパティを設定しても、ブラウザはこれらをそれぞれの部分に分割します(これは計算されたスタイルです)。要素には、「margin-top」、「margin-right」、「margin-bottom」、「margin-left」があり、ブラウザに「margin」プロパティがありません。 –

答えて

4

は、コンソールを開きます。次のように入力してください:

jQuery(".post-text"); // will select the post of this answer, you should see it in the console 
jQuery(".post-text").css("margin"); // will be "", the shorthand returns NOTHING 
jQuery(".post-text").css("margin-top"); // will be "0px", the real notation works 
jQuery(".post-text").css("margin","10px 10px 10px 10px"); // we just set all margins with shorthand, you should notice a change in the UI of stackoverflow. 
jQuery(".post-text").css("margin-top"); // is "10px" now 
jQuery(".post-text").css("margin"); // is still "" 

これは概念を明確にしたいと思っています。短い答え:あなたは設定することができますが、省略形のCSSの所有権は得られません。

6

CSSプロパティは、適用され、個々のスタイルに解釈されるため、設定することができます。

ただし、特にプログラムされていない限り、逆の処理は実行できません。例えば

、あなたはmarginのような速記特性を検出し、連結margin-topmargin-rightmargin-bottommargin-leftを返すために、読者をプログラムすることができます。

つまり、省略名にはいくつかの可能性があります。たとえば、margin: 10px 20pxは4つのマージンをすべて設定しますが、取得すると10px 20px 10px 20pxが得られますが、これは入力と同じではありません。

基本的には、短いストーリー略記記プロパティは正確に1組の個別プロパティに変換されますが、個々のプロパティの1セットはいくつかの可能性のある簡略化をもたらす可能性があります。

4

のgetterメソッド.css(propertyName)メソッドを使用してを取得した場合、jquery CSSの略語は機能しません。あなたはdefinetely CSSの速記でCSSルールを設定することができ

:あなたがFirefoxやChromeである場合

$('div').css("border", "2px solid Black"); 

DEMO