Question

我试图在没有像jQuery这样的大型库的帮助下进行一些html / css操作。

我使用this code知道dom何时准备就绪，并从中调用我的函数：

domready(function () {
  functionOne();
})

我如何对DOM进行更改，例如删除/添加类到元素，并让它知道它，以便我可以执行以下操作（在最后一行）：

<div id="myElement" class="active"></div>  

var linkElement = document.getElementById("myElement");
linkElement.className.replace(" active", " unactive");
elementByClass = document.getElementsByClassName("unactive")[0];

Answer 1

答案取决于您要支持的浏览器。最新的浏览器本身已经实现了许多jQuery功能（querySelector，classlist等）。

您的代码是一个良好的开端，但它不起作用，因为replace不会更改字符串，它会返回一个新字符串。

<div id="myElement" class="active"></div>  

var linkElement = document.getElementById("myElement");
linkElement.className = linkElement.className.replace(" active", " unactive");
elementByClass = document.getElementsByClassName("unactive")[0];

看一下classList，检查一下使用类的更强大的实现： https://developer.mozilla.org/en-US/docs/Web/API/Element.classList

Answer 2

尝试使用此代码将类名分配给DOM元素。

document.getElementById("myElement").className = "myClassName";

Answer 3

您需要重新分配它的DOM属性。

例如，您可以将DOM元素的classname属性指定为

document.getElementById("myElement").className = "myClassName";

您可以使用Element.setAttribute设置所有其他Dom元素属性。

Answer 4

如果您的浏览器支持Array extras和classList，请执行以下操作：

elements = document.getElementsByClassName('existingClass');
elements.forEach(function(elem){
    elem.classList.remove("existingClass");
    elem.classList.add("newClass");
    elem.classList.add("foo","bar");
});

希望有所帮助。

如果我想在不使用jQuery的情况下操作HTML / CSS，我应该采用什么方法？

4 个答案: