构造函数中的 px 未显示在 HTML 中

Question

我正在尝试通过JS构造函数和jquery代码将div添加到html中。

像素元素，即使已定义，似乎也被 HTML 忽略。

拜托，你能告诉我错误在哪里吗？

function Square(width, height){
this.width = width +"px";
this.height = height +"px";
this.background = "pink";
}
var secondSquare = new Square (100,100, "pink");

$(".btn-new-square").on('click',function() {
// console.log("pink sq");
$("body").append('<div id="newSquare">sdfghjkjhgf</div>');
// console.log('newSquare');
//$("#newSquare").append(secondSquare);
//$("#newSquare").addClass('newSquare');
console.log(secondSquare.height);
console.log(secondSquare.width);
console.log(secondSquare.background);
$("#newSquare").css({
"heigth": secondSquare.heigth,
"width": secondSquare.width,
"background-color": secondSquare.background });
});

Answer 1

你在这里拼写了错误的高度："heigth": secondSquare.heigth

在属性名称和属性名称中。

Answer 2

试试这个

function Square(width, height,color){
this.width = width +"px";
this.height = height +"px";
this.background = color;
}
var secondSquare = new Square (100,100, "pink");

$(".btn-new-square").on('click',function() {
$("body").append('<div id="newSquare">sdfghjkjhgf</div>');

console.log(secondSquare.height);
console.log(secondSquare.width);
console.log(secondSquare.background);
$("#newSquare").css({
"height": secondSquare.height,
"width": secondSquare.width,
"background-color": secondSquare.background });
});

函数正方形(宽度，高度，颜色(//这里 现在我添加了3个参数

"height"：secondSquare.height，//height拼写错误

https://codepen.io/anon/pen/JJzgzz?editors=1111