如何在 CodePen.io 中动态更新元素的样式？答案

【问题标题】：How can I update an element's styles dynamically in CodePen.io?如何在 CodePen.io 中动态更新元素的样式？
【发布时间】：2025-11-30 13:50:01
【问题描述】：

在 Codepen 中，我创建了一个 div，并为其赋予了一些属性：

  let lettersWritten = document.createElement("div");
  lettersWritten.setAttribute("class", "lettersWritten");
  lettersWritten.style.height = writtenHeight;
  lettersWritten.style.width = writtenWidth;
  lettersWritten.textContent = "<------ WRITTEN to date";

Codepen 创建了 div，设置了类，添加了文本，但没有更新高度和宽度。 Codepen.io 不会通过调用 element.style 来更新 element.style。

如何更新元素的样式？

【问题讨论】：

标签： styles codepen setattribute

【解决方案1】：

Codepen.io 将通过调用 setAttribute 来更新元素的样式：

  let lettersWritten = document.createElement("div");
  lettersWritten.setAttribute("class", "lettersWritten");
  lettersWritten.setAttribute("style", "height:"+writtenHeight+"px;width:"+writtenWidth+"px;");
  lettersWritten.textContent = "<------ WRITTEN to date";

下面是带有 fix 和 cmets 的 Codepen 的链接： https://codepen.io/theship/pen/e615b372bd408f89f0cb94d4f7b16cb0

【讨论】：