如何避免javascript中的nan错误？

Question

我需要从一个数字（例如1000）中减去几个容器的高度，同时这个数字必须是一个css值（在本例中为1000px）。 但是当我添加容器的高度并从数字 1000 中减去它时，我得到 NaN 错误。 我需要一个不使用 jquery 的答案。 这是代码：

let carouselHeight = document.getElementById("carouselExampleAutoplaying").offsetHeight;
let cardHeaderHeight = document.getElementById("cardHeaderDiv").offsetHeight;
let navbarHeight = document.getElementById("navDiv").offsetHeight;
let bannerHeight = document.getElementById("topBannerDiv").offsetHeight;
let CardBody = document.getElementById('CardBody');
CardBody.setAttribute('style', 'height: ' + 1000 - bannerHeight - navbarHeight - cardHeaderHeight - carouselHeight + 'px');

Answer 1

这是连接字符串：

'height: ' + 1000 - bannerHeight - navbarHeight - cardHeaderHeight - carouselHeight + 'px'

例如：

const bannerHeight = 1;
const navbarHeight = 2;
const cardHeaderHeight = 3;
const carouselHeight = 4;
const result = 'height: ' + 1000 - bannerHeight - navbarHeight - cardHeaderHeight - carouselHeight + 'px';
console.log(result);

但是你想让这部分成为数学：

1000 - bannerHeight - navbarHeight - cardHeaderHeight - carouselHeight

首先执行数学运算，然后在字符串中使用结果：

'height: ' + (1000 - bannerHeight - navbarHeight - cardHeaderHeight - carouselHeight) + 'px'

例如：

const bannerHeight = 1;
const navbarHeight = 2;
const cardHeaderHeight = 3;
const carouselHeight = 4;
const result = 'height: ' + (1000 - bannerHeight - navbarHeight - cardHeaderHeight - carouselHeight) + 'px';
console.log(result);