如果我想在没有jQuery的情况下操作HTML / CSS，我应该应用什么方法

What approach should I apply if I want to manipulate HTML/CSS without jQuery?

本文关键字：CSS HTML 我应该 方法 什么 应用 操作 情况下 jQuery 如果      更新时间：2023-09-26

我正在尝试在没有jQuery等大型库的帮助下进行一些html/css操作。

我使用此代码来了解 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];

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

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

<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

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

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

希望有帮助。

您需要重新分配 DOM 属性。

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

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

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

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

document.getElementById("myElement").className = "myClassName";
相关文章：