javascript - 如何以面向对象的方式创建 DOM 元素？

Question

这个问题已经有答案了:

Can I subclass a DOM-class? (4 个回答)

已关闭 7 年前。

我知道您可以使用创建任何元素，例如“a”标签

document.createElement('a')

如何以更面向对象的方式设计它？这是正确的方法吗？

function Button(){
  this.style.tagName = 'a';
  this.setAttribute('href', some_link);
  this.style.padding = '10px';
}

var pinkButton = new Button();
pinkButton.style.backgroundColor = 'pink';

document.getElementById('blah').appendChild(pinkButton)

并将其显示在元素 ID 'blah' 下的页面上

Answer 1

如果你基本上想要子类型按钮，那么你可以这样做

var customButtonFactory = function(bgColor){
  var button = document.createElement("button");
  button.style.background = bgColor;
  //do all the other custom styling you want for the button
  return button;
}

这取决于 onclick 函数有多么不同，您可以传递一些参数来在工厂内构建函数...或者您可以直接将函数作为参数传递。