Question

我有一个类如下，我想传递一个元素进行进一步的自定义。该类应负责设置框的大小并向其添加元素。我很难应用元素所需的必要样式。

class BoxBuilder {
    constructor(element, items) {
        this.items = items;
        this.elm   = document.getElementById(element);
    }
    setSize(h, w) {
        console.log(this.elm); // returns null
        this.elm.style.width = w;
        this.elm.style.height = h;
        return this;
    }
}

使用jQuery：

class BoxBuilder {
    constructor(element, items) {
        this.items = items;
        this.elm   = $(element);
    }
    setSize(h, w) {
        console.log(this.elm); // returns [context: document, selector: "#box-container"]
        this.elm.style.width = w;
        this.elm.style.height = h;
        return this;
    }
}


// here is what I am trying to achieve
var box = new BoxBuilder('#box-container').setSize(300, 250);

Answer 1

你正在使用一个不应该使用它的CSS选择器。 jQuery使用#box-container等CSS选择器，然后剥离#，因为这表明它是一个ID。要使用document.getElementById，请避免使用#。

所以重写你的作业行：

var box = new BoxBuilder('box-container').setSize(300, 250);

Answer 2

当您使用直接JavaScript时，您将获得null，因为您不使用#作为ID的一部分。这是jQuery的标识符，您正在寻找具有该ID的元素。替代方案是.，这将是按类。（其他CSS样式选择器也有效。）

因此，仅使用JavaScript时要发送的内容为var box = new BoxBuilder('box-container').setSize(300, 250);

Answer 3

您需要确保在加载DOM后调用document.getElementById 。否则，你找不到任何东西。

window.addEventListener('load', function(){ var box = new BoxBuilder('box-container').setSize(300, 250); });

为什么getElementById在类中调用时返回null？

3 个答案: