如何从HTML元素中移除属性？附示例HTML代码解析

嘿，我来给你拆解下移除HTML元素属性的实用方法，结合你提供的示例代码来演示，上手超简单！

方法1：用removeAttribute()精准移除（推荐） #

这是原生JS里专门用来移除元素属性的方法，兼容性好，逻辑清晰——不管属性原本是什么值，都能直接把它从元素上删掉。

比如针对你给的示例：

• 要让隐藏的mykitchen div显示出来，就移除它的hidden属性
• 要去掉img的固定宽高限制，就移除它的height和width属性

代码示例：

// 显示隐藏的厨房div
const kitchenDiv = document.getElementById('mykitchen');
kitchenDiv.removeAttribute('hidden');

// 移除img的width属性
const kitchenImg = document.querySelector('#mykitchen img');
kitchenImg.removeAttribute('width');
// 再移除height属性
kitchenImg.removeAttribute('height');

方法2：赋值为null（部分属性适用） #

有些DOM元素的标准属性（比如img的height、width）可以直接通过赋值为null来移除，但注意这种方式不适合布尔属性（比如hidden）——如果给hidden赋值null，元素会变成<div hidden="null">，依然是隐藏状态，所以这种方法要按需使用。

代码示例：

const kitchenImg = document.querySelector('#mykitchen img');
// 移除img的height属性
kitchenImg.height = null;

针对你提供的完整示例操作 #

如果要一次性完成多个移除操作，比如：

1. 显示mykitchen div
2. 移除img的宽高属性
3. 移除第一个li的id属性

可以用这段代码：

// 1. 移除div的hidden属性
document.getElementById('mykitchen').removeAttribute('hidden');

// 2. 移除img的height和width属性
const img = document.querySelector('#mykitchen img');
img.removeAttribute('height');
img.removeAttribute('width');

// 3. 移除第一个li的id属性
document.getElementById('ItsMyKitchen').removeAttribute('id');

内容的提问来源于stack exchange，提问作者Sam Jereria Manuel