Question

我无法相信我在google中找不到此内容 - 我需要为div添加一个名为checkField的其他类名：

<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

我试过了：

document.getElementsByClassName("field").getElementsByTagName("label").className="error";

^也行不通。

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

Answer 1

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

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

某些浏览器支持classList，它提供了在元素上添加，删除和切换类的方法。例如，您可以添加如下的新类：

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

想象一下切换课程所涉及的工作;你必须执行一些字符串操作来首先确定一个类是否已经在元素上，然后相应地做出响应。使用classList，您只需使用toggle方法：

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

某些浏览器目前不支持classList，但这不会阻止您利用它。您可以download a polyfill将此功能添加到本机不支持的位置。

Answer 2

getElementsByClassName方法返回一个nodeList，它是一个类似数组的对象，而不是单个元素。要做你想做的事，你需要迭代列表：

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实际上替换了类而不是添加它。如果你想添加另一个类，你需要这样做：

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';
      }
    }
  }
}

Answer 3

尝试类似

的内容

你想通过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");

Answer 4

以下是用于添加和删除类的简单实用程序函数：

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, "");
}

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

4 个答案: