jQuery => CSS操作

構文

.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")のwidthを500pxし、指定されたセレクターにさらに多くのメソッドを連結できるように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

jQuery
CSS操作

サーチ…

構文

備考