Looking for jquery Answers? Try Ask4KnowledgeBase
Looking for jquery Keywords? Try Ask4Keywords

jQueryCSS操作


構文

  • .css(cssProperty)//レンダリングされたCSSプロパティ値を取得する
  • .css([cssProperty、...])// cssPropertiesの配列から値を取得する
  • .css(cssProperty、value)//値を設定する
  • .css({cssProperty:value、...})//プロパティと値を設定する
  • .css(cssProperty、function)// cssPropertyをコールバック関数に公開する

備考

レンダリングされた値

応答可能なユニット( "auto""%""vw"など)を使用する場合、 .css()は実際のレンダリングされた値をpx返します

.myElement{ width: 20%; }
var width = $(".myElement").css("width"); // "123px" 

プロパティと値の書式設定

プロパティは、 標準のCSSフォーマットをStringとして使用するか、 camelCaseを使用して定義できます

"margin-bottom"
marginBottom

は文字列で表現する必要があります。数値はjQueryによって内部的にpx単位として扱われます。

.css(fontSize: "1em")
.css(fontSize: "16px")
.css(fontSize: 16)      // px will be used

jQuery 3 .show().hide().hide()使用を避けました。

このjQuery Blogの投稿によれば、オーバーヘッドやパフォーマンス上の問題のために、 .show().hide()を使用する必要はありません。

スタイルシートにdisplay: none設定された要素がある場合、 .show()メソッドはそれをオーバーライドしなくなります。したがって、jQuery 3.0に移行するための最も重要なルールは、次のとおりです。スタイルシートを使用してdisplay: noneデフォルトを設定し、 .show()または.slideDown()などの要素を示すメソッドを使用しようとしdisplay: noneでください。 .fadeIn() - 可視にします。要素をデフォルトで非表示にする必要がある場合は、要素に「隠し」のようなクラス名を追加し、そのクラスをdisplay: noneにスタイルシートで定義することをお勧めします。次に、jQueryの.addClass()および.removeClass()メソッドを使用して、そのクラスを追加または削除して、可視性を制御できます。別の方法として、あなたが持つことができます.ready()ハンドラのコール.hide()それらはページ上に表示される前に、要素のを。または、実際にスタイルシートのデフォルトを保持する必要がある場合は、 .css("display", "block") (または適切な表示値)を使用してスタイルシートをオーバーライドできます。

CSS操作 関連する例