首页 > 文章列表 > 如何访问和修改DOM元素的属性?

如何访问和修改DOM元素的属性?

274 2025-04-04

如何访问和修改DOM元素的属性?

DOM元素属性操作详解

本文将详细讲解如何获取和修改DOM元素的属性,特别是那些通过console.dir(e)查看的属性。我们将以一个简单的div元素为例,演示如何操作其属性。

代码示例中,我们用document.getElementById('box')获取id为'box'的div元素,并用console.dir(e)打印其所有属性,包括accessKey等可能不太熟悉的属性。

属性访问与修改

访问和修改属性的方法非常简单,直接使用点号(.)运算符即可。

读取属性:

例如,要读取accessKey属性的值,可以使用:

e.accessKey;

这将返回accessKey属性的当前值,如果属性不存在则返回undefined。 您可以将accessKey替换为console.dir(e)显示的任何其他属性名(如classNameidstyle等)来读取其值。

修改属性:

修改属性同样简单。例如,将accessKey属性值设为空字符串:

e.accessKey = "";

这将把div元素的accessKey属性设置为一个空字符串。 您可以用其他属性名和新值替换它们。 需要注意的是,并非所有属性都可直接修改。有些属性是只读的,或需要其他方法修改。例如,修改className属性相当于修改元素的class属性;修改style属性需要更细致的处理,因为它是一个对象。

来源:1740878926