css - 使用 Google 协作平台和 Google App 脚本，如何动态更改 HTML 元素的 CSS 类？

Question

我正在为我的网页使用 Google 协作平台，我希望它的某些部分是动态的。因此，我想要实现的是在出现点击事件时更改与特定 HTML 元素关联的 CSS 类。

例如:初始情况:

<div class="foo">Hello</div>
<a href="#" onlick="method()">World</a>

点击“世界”后:

<div class="bar">Hello</div>
<a href="#" onlick="method()">World</a>

Answer 1

给div添加一个ID，然后:

function method() {
  var myDiv = document.getElementById("myDIV");
  myDiv.className = "bar";
}

或者，您可以获取具有该特定类名的所有元素，然后遍历它们以更改它们的类名。

function method() {
  var myDivs = document.getElementsByClassName("foo");

for (var i = 0; i < myDivs.length; i++)
    myDivs[i].className = "bar";
}

当然，现在您可以添加 if/else 语句以在进行更改之前检查某些条件。