javascript - 使用对象构造函数设置 html 元素的样式

Question

我正在练习使用构造函数/对象。我想使用这种类型的对象动态地使用 CSS 设置一些 div 的样式。我正在尝试使用 document.getElementById 获取 div，但无法设置它们的样式。我收到错误消息“无法设置未定义的背景颜色”。看来我实际上并没有得到我想要的元素，或者它没有被保存到变量中。

如何获取元素并将其传递给构造函数？

<div id='div1'>div1</div>
<div id='div2'>div2</div>

function StyleDiv(id) {
document.getElementById('id');
this.style.backgroundColor = 'blue';
this.style.height = '110px';
this.style.width = '110px';
}

var div1st = new StyleDiv('div1');
var div2nd = new StyleDiv('div2');

Answer 1

您需要在变量中保留对所选元素的引用，然后在设置样式时使用该变量:

function StyleDiv(id) {
   var elm = document.getElementById(id); 
   elm.style.backgroundColor = 'blue';
   elm.style.height = '110px';
   elm.style.width = '110px';
}

请注意，我还删除了 id 周围的引号在getElementById(id)

关于“这个”

this最初在 JavaScript 中理解关键字可能有点麻烦。这是一个good article这将进一步解释它。

在那篇文章的帮助下，我相信您将能够为所有这些创建一个更加面向对象的方法。您可能希望将该元素作为实例的公共(public)属性，或者公开一个公共(public)方法来设置该元素的样式。