Javascript更改 HTML 类和属性

Posted on by

HTML 元素通常具有类和属性。例如，下面的代码有一个名为active 的类和一个名为data-settings 的属性，值为true：

<div class="active" data-settings="true">
    This is my div
</div>

我们可以在 Javascript 中更改这些，这意味着我们可以根据我们在代码中设置的条件更改 HTML。

添加和删​​除类#

首先，我们需要选择要更改的 HTML 元素。对于我们的示例，假设我们有一个 id 为“ my-id ”的元素。

const myElement = document.getElementById('my-id');

添加类

所有类更改都通过classList. 因此，要向我们的元素添加一个新类“ some-new-class ”，我们将执行以下操作：

const myElement = document.getElementById('my-id');
myElement.classList.add('some-new-class');

删除类

同样，如果我们想使用 Javascript 删除一个类，我们执行以下操作：

const myElement = document.getElementById('my-id');
myElement.classList.remove('some-new-class');

替换类

我们也可以用另一个类替换一个类。下面将用 ‘ another-class ‘ 替换 ‘ some-new- class ‘

const myElement = document.getElementById('my-id');
myElement.classList.replace('some-new-class', 'another-class');

切换类

有时我们不知道类是否在元素上。因此，toggle如果类存在，我们可以使用它来添加，如果不存在，则将其删除。

const myElement = document.getElementById('my-id');
myElement.classList.toggle('active-class');

检查元素是否有类

我们还可以检查我们的元素是否有一个类，使用contains：

const myElement = document.getElementById('my-id');
if(myElement.classList.contains('active-class')) {
    // Do something if the element has a class 'active-class'
}

在 Javascript 中更改属性#

要更改 HTML 属性，我们可以使用setAttribute：

const myElement = document.getElementById('my-id');

// Sets myElement's data-attribute attribute to true
myElement.setAttribute('data-attribute', true);

检索属性值

我们还可以检索属性的值，使用getAttribute. 如果该属性不存在，它将返回null：

const myElement = document.getElementById('my-id');

// This will get the current value to myElement's attribute called 'data-attribute'.
let dataAttribute = myElement.getAttribute('data-attribute');

推荐阅读：