Javascript 如何向元素添加其他类名？

我简直不敢相信我在谷歌上找不到这个-我需要用classname

checkField

在

div

中添加一个额外的类名：

<div id="wth" class="checkField"><label>Ok whatever</label></div>

document.getElementById("wth").className="error"; // This works
document.getElementsByClassName("field").className="error"; // Doesn't work

^也不起作用

---

有人能给我一些建议吗？我太习惯JQuery了。

您需要将类添加到当前值：

document.body.className += " foo"; // adds foo class to body

某些浏览器支持提供添加、删除和切换元素类的方法。例如，您可以添加一个新类，如下所示：

document.body.classList.add("newClass");

divs[i].className += ' error'; // notice the space bar

想象一下切换一个类所涉及的工作；您必须先执行一些字符串操作来确定元素上是否已有类，然后做出相应的响应。使用

classList

可以使用

toggle

方法：

document.body.classList.toggle("toggleMe");

某些浏览器目前不支持

类列表

，但这不会阻止您利用它。您可以在本机不支持的地方添加此功能。

尝试类似的操作

您希望通过document.body执行此操作

所以试试看

var demo =document.body; 

// also do this by class like var demo = document.getElementsByClassName("div1one"); 
// or id var demo = document.getElementsId("div1one"); 

demo .className = demo .className + " otherclass";

或者更简单的解决方案，如果您有jquery作为选项

 $("body").addClass("yourClass");

---

getElementsByClassName

方法返回一个节点列表，它是一个类似数组的对象，而不是单个元素。要执行所需操作，需要迭代列表：

var divs = document.getElementsByClassName("checkField");
if (divs) {
  // Run in reverse because we're
  // modifying the result as we go:
  for (var i=divs.length; i-- >= 0;) {
    divs[i].className = 'error';
  }
}

另外，只需设置

className

实际上会替换类，而不是添加到类中。如果要添加另一个类，需要按如下方式进行：

document.body.classList.add("newClass");

divs[i].className += ' error'; // notice the space bar

至于您要做的第二件事，那就是设置标签的类而不是div，您需要在div中循环并对其调用

getElementsByTagName

：

var divs = document.getElementsByClassName("checkField");
if (divs) {
  // Run in reverse because we're
  // modifying the result as we go:
  for (var i=divs.length; i-- >= 0;) {
    var labels = divs[i].getElementsByTagName('label');
    if (labels) {
      for (var j=0; j<labels.length; j++) {
        labels[j].className = 'error';
      }
    }
  }
}

var divs=document.getElementsByClassName（“checkField”）；
如有需要（分区）{
//反向运行，因为我们
//在执行时修改结果：
对于（变量i=divs.length；i-->=0；）{
var labels=divs[i].getElementsByTagName（'label'）；
如果（标签）{
对于（var j=0；j，以下是用于添加和删除类的简单实用程序函数：

function addClass(elem, cls) {
    var oldCls = elem.className;
    if (oldCls) {
        oldCls += " ";
    }
    elem.className = oldCls + cls;
}

function removeClass(elem, cls) {
    var str = " " + elem.className + " ";
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
}

给定
.getElementsByCassName（）
应该返回一个活动节点列表，如果您像在第一个示例中那样替换类名，则循环将无法正常工作：-尽管如果您向后循环列表，它会正常工作。当然，如果您添加第二个类而不是替换，这不是问题。返回一个，它的功能比普通类多一点。