web-dev-qa-db-ja.com

css幅の文字列を通常の数値に変換します

非表示の要素の幅を計算しようとしたときに、jquery.width（）がその要素の幅に対して0を返すことがわかりました。

Jquery.css（ 'width'）を使用すると、宣言されたスタイル幅を使用して正しい幅が返されることがわかりました（その値が最初のスタイルシートと異なっていても）。問題は、css（ 'width'）メソッドが通常「100px」の方法で文字列を返すことです。私の質問は次のように解決されます：「100px」文字列から数値を取得する方法は？簡単な方法はありますか？

javascriptjquerycssnumberswidth
21
vitorhsb

常にpx形式、「100px」、「50px」などで返される場合（つまり、「em」やパーセントではない場合）、次のようになります...

var width = parseInt($("#myelem").css("width"),10); // always use a radix

または

var width = parseInt(element.style.width,10); // always use a radix

「px」サフィックスは無視されるので、問題ないはずです。

深く考えていますが、$（ "＃myelem"）。width（）が機能していないと、何かが正しくないと思います。

非表示の要素に関する注意。

JQueryを追加してページを段階的に拡張する場合、計算している要素は、ページが最初に読み込まれたときに表示されるはずです。したがって、最初に要素を非表示にする前に、幅を取得する必要があります。これを行うことにより、$（ "＃myelem"）。width（）が機能します。

var myWidth = 0;

$(document).ready( function () {
    myWidth = $("#myelem").width();
    $("#myelem").hide();
});
29
Fenton

正規表現を使用して非数値を削除してから、数値に変換することができます。これは、幅（px、em、%、pt）。小数点も保持します。

バニラJavaScript

Number(elem.style.width.replace(/[^\d\.\-]/g, ''));

jQuery

Number($elem.css('width').replace(/[^\d\.\-]/g, ''));
2
hofnarwillie

プレーンJavaScriptの場合：

parseInt('100px', 10)

「100em」、「100％」、さらには「100」でも動作します。正規表現パターンは必要ありません。

2
jony

ああ、私は思いついた：
new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number

今私はjqueryが常に同じ文字列のファッションを返すことを願っています： "100px"

1
vitorhsb

.width()に固執します。これは、実際にはcss幅ではなく計算された幅を取得するためです。 .hide()（_display: none_）で非表示にする代わりに、.css('visible', 'hidden')で非表示にすると、.width()が機能するはずです。

私のコメントから.hide()´sを変更したくない場合は、_visible: hidden_を適用し、その後.show()を適用して、高さ。あなたがそれを測定した後、それを逆にします。オブジェクトが_visible: hidden_によって非表示になっている場合でも、オブジェクトはページレイアウトに影響します。注意してください。

レイアウトを混乱させるタグを回避するために、位置を絶対に設定し、それをbodyタグに移動してから、測定することができます。

0
Lasse Espeholt