Question

我正在尝试使用css属性进行计算，但它不会返回任何内容。

我认为这可能是因为css属性返回'200px'而不是简单地'200'。任何人都可以提出建议吗？非常感谢。

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

Answer 1

您需要将“200px”字符串转换为整数;使用parseInt

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

否则您的总和windowHeight * 0.5 - logoHeight将返回NaN（不是数字）。

始终将基数指定为parseInt的第二个参数非常重要，否则您会找到类似的内容;

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

Answer 2

您应该只能在height()元素上使用<h1>：

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

Answer 3

试试这个，

windowHeight = $(window).height(); // This works
logoHeight = $('.home h1').css('height'); // This returns '200px'
logoPosition = windowHeight * 0.5 - parseInt(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

使用jQuery和CSS属性进行计算

4 个答案: