4

你能解释一下下面的代码有什么问题吗？

function box (width, height, color) {
    this.width=width;
    this.height=height;
    this.color=color;
    this.style.width=width;
    this.style.height=height;
    this.style.backgroundColor=color;
}

var box1 = new box (100, 100, 'red');

document.body.appendChild(box1);
4

3 回答 3

3

您需要createElement将参数传递给它，如下所示：

function box (width, height, color) {
  this.element = document.createElement('div');
  this.element.style.width=width+'px';
  this.element.style.height=height+'px';
  this.element.style.backgroundColor=color;
  return this.element;
}

var box1 = box (100, 100, 'red');

document.body.appendChild(box1);

于 2020-06-20T11:22:57.993 回答
2

主要问题是它box不会创建 DOM 元素。您不能只是将任何对象附加到 DOM，它必须是某种类型的 DOM 节点（元素、文本节点等）。

如果您确实box创建了一个 DOM 元素，那么您不会想直接在其上存储width、height和color，而只是在其style对象中。

由于您使用时创建的对象new将被丢弃，因此我将使用它createBox而不是new与它一起使用：

function createBox(width, height, backgroundColor) {
    const element = document.createElement("div");
    element.style.width = width + "px";
    element.style.height = height + "px";
    element.style.backgroundColor = backgroundColor;
    return element;
}

document.body.appendChild(
    createBox(100, 100, "red")
);

如果您不想创建 DOM 元素，那么问题this.style.width=width在于它试图分配给undefined，因为this没有style属性，this.style所以undefined. 如果要从各种属性创建对象，可以使用对象字面量：

function Box(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
    this.style = {width, height, backgroundColor: color};
}

（请注意，我更改box为Box. JavaScript 中压倒性的约定是构造函数（您调用 vianew或类似的函数）以大写字符开头。）

但是，如果您要创建一个 DOM 元素，那么它已经有了一个style对象。

我应该注意，我已经使用了width和height那里的速记属性，这些属性是在 ES2015 中添加的，因此几乎得到了普遍支持，但不受 IE11 等过时的浏览器的支持。如果您需要支持它们，请改用长格式 ( width: width)。

您还可以查看 ES2015 的class语法，它允许您创建构造函数并以更简洁、不易出错的方式填充它们分配为实例原型的对象。如果您需要针对仅限 ES5 的浏览器，可以使用 Babel 等工具为您进行转换。

于 2020-06-20T11:20:40.710 回答
0

这不是构造函数，而只是一个函数。this在函数中不是元素。

在函数中，您没有创建实际的框。某些属性（例如this.color）将被分配，但并不总是符合您的预期。此外，该函数box不返回任何内容，因此无需附加任何内容。

这是创建元素的骨架，但我建议您先尝试学习更多的JS/Html/Dom 脚本。

function box (width, height, color, backgroundColor) {
  const box = document.createElement("div");
  const toPx = n => `${n}px`;
  box.style.width = toPx(width);
  box.style.height = toPx(height);
  box.style.color = color;
  box.style.backgroundColor = backgroundColor;
  // return this, otherwise there's nothing to append
  return box;
}

var box1 = box(100, 100, 'white', 'red');
box1.textContent = "Hello world";
document.body.appendChild(box1);

于 2020-06-20T11:29:33.730 回答