jQueryとCSSプロパティを使って計算する

Question

CSSプロパティを使用して計算をしようとしていますが、何も返しません。

私は、CSSプロパティが単に '200'ではなく '200px'を返している可能性があると思います。誰もが回避策を提案できますか？どうもありがとう。

windowHeight = $(window).height(); // This works 
logoHeight = $('.home h1').css('height'); // This returns '200px' 
logoPosition = windowHeight * 0.5 - logoHeight; 

Answer 1

はここ

windowHeight = $(window).height(); // This works 
logoHeight = $('.home h1').css('height'); // This returns '200px' 
logoPosition = windowHeight * 0.5 - parseInt(logoHeight); 

Answer 2

"200px"文字列を整数に変換する必要があります。 windowHeight * 0.5 - logoHeightがNaN（非数）を返しているそうでなければ、あなたの合計を

windowHeight = $(window).height(); // This works 
logoHeight = parseInt($('.home h1').css('height'), 10); // This returns '200px' 
logoPosition = windowHeight * 0.5 - logoHeight; 

parseIntを使用。

には常にが重要で、parseIntの2番目のパラメータとして基数を指定するか、次のようなものがあります。

parseInt("022") == 18; // true 

Answer 3

あなただけ<h1>要素にheight()を使用することができるはずです。

windowHeight = $(window).height(); // This works 
logoHeight = $('.home h1').height(); 
logoPosition = windowHeight * 0.5 - logoHeight; 

Answer 4

が他のCSSを使用する方法をお見せするためにいくつかの他の例であり、これを試してみてくださいプロパティとjQueryメソッド。 Check our jQuery style properties

var element = $('#element'); 
var borderLeftWidth = parseInt(element.css('borderLeftWidth'), 10); // css border-left-width 
var borderRightWidth = parseInt(element.css('borderRightWidth'), 10); // css border-right-width 
var fullWidth = element.outerWidth(false); // includes padding and border but not margins