如何使用 JavaScript 将类添加到任何“div”或“li”或“a”答案

【问题标题】：How to add class to any "div" or "li" or "a" with JavaScript如何使用 JavaScript 将类添加到任何“div”或“li”或“a”
【发布时间】：2016-10-13 07:26:22
【问题描述】：

我希望你在不编辑 div 的情况下向任何 div 或 li 添加类。实际上，我在 wordpress 中找到了一个名为 animate it 的插件，我需要添加“animate it class”来为任何内容设置动画。所以我想在 woocommerce 中为我的产品制作动画。但问题是，我无法编辑 html。所以我的问题很简单，如果我知道它是 id 或 class，我如何通过 javascript 向 div 添加一个类。

如何在下面给出的示例中执行此操作。 <div id="product-1" class="my-product-1">this is product 1</div>

【问题讨论】：

最轻微的位研究会将您指向document.getElementById和className/classList。

标签： javascript css wordpress

【解决方案1】：

如果你使用 jQuery：

$( document ).ready(function() {
    $('div, li').addClass('newClass');
});

您可以通过在其中放置您想要的任何类或 id 来替换 'div, li'，即：

$('.class').addClass('newClass');

或

$('#id').addClass('newClass');

更多信息： https://api.jquery.com/addclass/

【讨论】：

试着把它放在你网站底部的标签之前。记得使用
什么是 DOM ？我对javascript一无所知。我正在使用wordpress。那么你能告诉我应该把代码放在哪里吗？

【解决方案2】：

在元素的className 属性中添加一个空格和新类的名称。首先，在元素上添加id，以便您轻松获得参考。

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

然后

var d = document.getElementById("div1");
d.className += " otherclass";

来自https://stackoverflow.com/posts/507157/edit的参考

另见element.className on MDN。

【讨论】：

【解决方案3】：

纯javascript解决方案，确保在加载DOM时运行。

var items = document.getElementsByTagName("a");

for (i = 0; i < items.length; i++) {
  items[i].className += "item";
}

console.log(items);

<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>

【讨论】：

什么是 DOM ？我对javascript一无所知。我正在使用wordpress。那么你能告诉我应该把代码放在哪里吗？

【解决方案4】：

你可以使用 DOM 元素

document.getElementsByID("#id").setAttribute("class", "democlass");

【讨论】：