jquery cssはピクセルを削除します-フロントエンドQ&A-php.cn

jquery cssはピクセルを削除します

王林

リリース： 2023-05-25 11:12:08

オリジナル

954 人が閲覧しました

jQuery は、HTML ドキュメントと CSS スタイルを簡単に操作できる非常に人気のある JavaScript ライブラリです。 jQuery を使用すると、CSS スタイルを簡単に追加、削除、変更、クエリできるため、Web ページのデザインがより柔軟で多様になります。

フロントエンド開発ではCSSスタイルの操作がよく使われます。よくあるリクエストの 1 つは、CSS スタイルから「px」単位を削除することです。多くの場合、これらの数値を計算や比較に使用できるように、CSS スタイルの値を単位のない数値に変換する必要があります。

jQuery では、この機能を実現するさまざまな方法があります。一般的な方法をいくつか紹介します。

parseInt() 関数の使用

parseInt() 関数は JavaScript の組み込み関数であり、文字列を解析して整数を返すために使用されます。「px」単位の CSS 値の場合、parseInt() 関数を使用して単位を削除すると、数値が得られます。

たとえば、幅が「100px」の要素がある場合、次のコードを使用してそれを単位なしの数値に変換できます:

var width = parseInt($("#element").css("width"));

ログイン後にコピー

この例では、最初に次のコードを使用します。 jQuery セレクターは要素を選択し、.css() メソッドを使用して要素の CSS スタイル値を取得します。最後に、parseInt() 関数を使用して値を整数に変換します。このようにして、単位なしで幅の値を取得できます。

parseFloat() 関数を使用する

parseInt() 関数に加えて、parseFloat() という別の一般的な JavaScript 組み込み関数があります。これは文字列を解析し、浮動小数点数を返します。小数点と「px」単位を含む CSS 値の場合、parseFloat() 関数を使用して単位を削除し、数値を得ることができます。

たとえば、不透明度が「0.5」の要素がある場合、次のコードを使用してそれを単位なしの数値に変換できます。

var opacity = parseFloat($("#element").css("opacity"));

ログイン後にコピー

この例では、 jQuery も使用します。セレクターは要素を選択し、.css() メソッドを使用して要素の CSS スタイル値を取得します。最後に、parseFloat() 関数を使用して値を浮動小数点数に変換します。このようにして、単位なしで透明度の値を取得できます。

正規表現の使用

JavaScript 組み込み関数の使用に加えて、正規表現を使用して CSS スタイルのユニットを削除することもできます。正規表現は、文字列内の特定のパターンを簡単に識別できる強力なパターンマッチングツールです。

たとえば、「100px」を単位のない数値に変換するには、次のコードを使用できます:

var num = "100px".replace(/D+/g, '');

ログイン後にコピー

この例では、.replace() メソッドを使用して文字列を置き換えました。の「px」単位。このメソッドには、置き換えるものと置き換える対象の 2 つのパラメータが必要です。この例では、正規表現 /D /g を使用して、文字列内の数値以外の文字をすべて照合し、それらを空の文字列に置き換えました。このようにして、単位なしで数値を取得できます。