非数になって要素が配置できない

Question

###要素をブラウザの中央に配置したい
IDが#scroll_buttonの要素を中央に配置するため、ブラウザの幅から中央に配置したい要素の幅で減算しそれを2で除算しているのですが、コンソール画面をみると演算結果(s_button_widthの幅)はNaNです。なぜ、非数が返ってくるのでしょうか。

###発生している問題・エラーメッセージ
ブラウザの幅と要素の幅を減算したものに2を除算した値を算出しようとするとNaNが返ってくる。
###ソースコード

	var w_width = $(window).width();
	var sb_width = $('#scroll_button').css('width');
	console.log('w_width:',w_width,'sb_width:',sb_width);
	var s_button_width= Math.floor((w_width - sb_width) /2);
	console.log('sbuttonの幅',s_button_width);//NaN
	//$('#scroll_button').css('width', s_button_width);		

###補足情報(言語/FW/ツール等のバージョンなど)
javascript、jquery

Answer 1

.css('width')で返ってくる値は300pxなどのpxがついた文字列です
なので数字から文字列を引き算してNanになってます！

//これは文字列
var sb_width = $('#scroll_button').css('width');

//pxをけして、数値に変換する
parseInt($('#scroll_button').css('width'))

ちなみにcenter寄せするなら

//可変boxの場合
#scroll_button{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

//固定ボックスの場合
#scroll_button{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}

で中央寄せできますよーー！

Comments

[ryls-nmm]

parseInt してるなら `.split('px')[0]` はなくていいと思います

[MasakazuFukami]

たしかにそうですね！！！ありがとうございます！

[aaaaaaaa]

ご回答有難うございます。とても勉強になりました。
ところで一つ質問ですが、translate関数の引数を負数の百分率で指定されたのは何故でしょうか。

[MasakazuFukami]

position:absolute;でtop:50%; left:50%;とすると対象要素の「左上」が50%, 50%の位置に来ます。
なので、自分の幅の半分だけ左に、上に移動させ無くてはならないのでtransalteで-50%を指定しているわけです！

これで大丈夫でしょうか？？

[aaaaaaaa]

度々すみません。ご回答有難うございます。
中央に配置するためにtranslateの負数の百分率で帳尻を合わしているわけですね。
理解できました。

Answer 2

幅がとりたいなら.width()を使えばいいので、わざわざCSSメソッドを使う必要がないですね。
そちらであれば、数値が返ってくるので変換も必要ありません。

 var sb_width = $('#scroll_button').width();

Answer 3

$('#scroll_button').css('width');

これだと、100pxとかって返ってきません？