jQueryでスタイルを取得するにはどうすればよいですか?メソッドの簡単な分析

Web 開発では、幅、高さ、色など、特定の要素のスタイルを取得する必要がある場合があります。今回はjQueryがどのようにしてスタイルを取得するのかを紹介します。

まず、jQuery にはスタイルの取得と設定に使用できる css() という関数が用意されていることを知っておく必要があります。この関数には 2 つのパラメータがあり、最初のパラメータは取得するスタイル属性、2 番目のパラメータは属性の値 (オプション) です。

それでは、css() 関数をどのように使用するのでしょうか?以下にいくつかの例を示します。

要素の幅と高さを取得します:

var w = $("#myElement").css("width");
var h = $("#myElement").css("height");

要素の背景色を取得します:

var bgColor = $("#myElement").css("background-color");

要素の境界線の色を取得します:

var borderColor = $("#myElement").css("border-color");

要素のフォントの取得 サイズ:

var fontSize = $("#myElement").css("font-size");

要素の透明度の取得:

var opacity = $("#myElement").css("opacity");

上記の一般的に使用されるスタイル属性に加えて、css() 関数は、パディング、マージン、ボーダーなどの他のスタイル属性も取得できます。スタイルを設定したい場合は、css() 関数の 2 番目のパラメーターが便利です。たとえば、要素の背景色を赤に設定するには、次のように記述できます。

$("#myElement").css("background-color", "red");

場合によっては、要素の計算されたスタイル、つまり要素の実際のスタイルを取得する必要があります。スタイル シート スタイルで定義されたブラウザではなく、ブラウザです。このとき、別の関数 getComputedStyle() を使用できます。この関数は次のように使用されます:

var elem = document.getElementById("myElement");
var style = window.getComputedStyle(elem);
var width = style.getPropertyValue("width");

getComputedStyle()この関数はオブジェクトを返します。計算されたスタイルのプロパティと値。 getPropertyValue() 関数を使用して、特定のスタイル属性の値を取得できます。

css() 関数と比較すると、getComputedStyle() 関数はより強力で、より多くのスタイル属性を取得できますが、使用するのが面倒でもあります。実際のニーズに基づいて、どの機能を使用するかを選択できます。

実際の開発では、要素のスタイル属性を取得することが非常に一般的な要件です。 jQuery が提供する css() 関数と DOM が提供する getComputedStyle() 関数をマスターすると、要素のスタイルを簡単に取得および設定できるようになります。

以上がjQueryでスタイルを取得するにはどうすればよいですか?メソッドの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。