サーチ…


構文

  • .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プロパティを設定する

1つのスタイルのみを設定する:

$('#target-element').css('color', '#000000');

複数のスタイルを同時に設定する:

$('#target-element').css({
    'color': '#000000',
    'font-size': '12pt',
    'float': 'left',
});

CSSプロパティを取得する

要素のCSSプロパティを取得するには、 .css(propertyName)メソッドを使用できます。

var color    = $('#element').css('color');
var fontSize = $('#element').css('font-size');

インクリメント/デクリメント数値プロパティ

数値CSSプロパティは、それぞれ.css()メソッドを使用して、 +=および-=構文で増分または減分することができます。

  // Increment using the += syntax
  $("#target-element").css("font-size", "+=10");
  
  // You can also specify the unit to increment by
  $("#target-element").css("width", "+=100pt");
  $("#target-element").css("top", "+=30px");
  $("#target-element").css("left", "+=3em");
  
  // Decrementing is done by using the -= syntax
  $("#target-element").css("height", "-=50pt");

CSS - ゲッターとセッター

CSSゲッター

.css() getter関数は、次のようにページのすべてのDOM要素に適用できます。

// Rendered width in px as a string. ex: `150px`
// Notice the `as a string` designation - if you require a true integer, 
// refer to `$.width()` method
$("body").css("width"); 

この行は、指定された要素の計算された幅を返します。カッコで指定した各CSSプロパティは、この$("selector") DOM要素のプロパティの値を返します。存在しないCSS属性応答としてundefinedなります。

また、属性の配列でCSSゲッターを呼び出すこともできます。

$("body").css(["animation","width"]);

その値を持つすべての属性のオブジェクトを返します。

Object {animation: "none 0s ease 0s 1 normal none running", width: "529px"}

CSSセッター

.css() setterメソッドは、ページのすべてのDOM要素に適用することもできます。

$("selector").css("width", 500);

このステートメントは、 $("selector")width500pxし、指定されたセレクターにさらに多くのメソッドを連結できるようにjQueryオブジェクトを返します。

.css() セッターはCSSプロパティと値のObjectを渡すのにも使うことができます:

$("body").css({"height": "100px", width:100, "padding-top":40, paddingBottom:"2em"});

設定者が行ったすべての変更は、DOM要素styleプロパティに追加され、要素のスタイルに影響を与えます(ただし、スタイルプロパティ値は既にスタイルの他の場所で!importantです)。



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow