1

我不敢相信我在 google 中找不到这个 - 我需要添加一个额外的类名到div带有类名的 a 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 太习惯了。

4

4 回答 4

1

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

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

一些浏览器支持classList提供在元素上添加、删除和切换类的方法。例如，您可以像这样添加一个新类：

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

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

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

某些浏览器当前不支持classList，但这不会阻止您利用它。您可以下载一个 polyfill以在本机不支持的地方添加此功能。

于 2012-10-24T04:28:58.270 回答
1

该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';
      }
    }
  }
}
于 2012-10-24T04:33:14.713 回答
0

尝试类似的东西

你想通过 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");
于 2012-10-24T04:29:06.617 回答
0

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

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, "");
}
于 2012-10-24T06:37:01.203 回答