Chrome控制台面板无鼠标设置Attribute的替代JS代码方案咨询

当然有靠谱的替代方案！我之前也碰到过在Elements面板编辑HTML时没法直接用setAttribute/getAttribute的情况，下面是几个纯JS的实现方式，全程不用碰鼠标：

1. 直接操作DOM对象的属性（最推荐） #

大部分标准HTML属性都对应DOM元素对象的直接属性，直接赋值/读取比调用setAttribute更简洁，而且在控制台里完全可用：

// 给页面第一个div设置id
document.querySelector('div').id = 'main-container';
// 设置class（注意用className，因为class是JS关键字）
document.querySelector('p').className = 'highlighted text-large';
// 给输入框设置value
document.querySelector('input[type="text"]').value = '测试内容';
// 勾选复选框
document.querySelector('input[type="checkbox"]').checked = true;

这种方式对原生属性（比如src、href、disabled）的支持比setAttribute更可靠，很多时候是首选。

2. 利用控制台的$0快捷变量操作选中元素 #

如果你已经在Elements面板选中了目标元素（不用进入编辑模式），控制台里可以用$0直接指代这个元素，然后正常调用setAttribute/getAttribute：

// 给当前选中的元素设置自定义属性data-id
$0.setAttribute('data-id', 'user_123');
// 读取该属性
$0.getAttribute('data-id');
// 移除属性
$0.removeAttribute('data-id');

这个方法特别适合快速操作特定元素，不用写复杂的选择器。

3. 用dataset操作自定义数据属性 #

如果是操作data-*开头的自定义属性，用dataset语法比setAttribute更优雅：

// 设置data-user属性
document.querySelector('.profile-card').dataset.user = 'goethe';
// 读取data-user属性
document.querySelector('.profile-card').dataset.user;
// 删除data-user属性
delete document.querySelector('.profile-card').dataset.user;

补充说明 #

为什么在Elements面板的HTML编辑模式下调用setAttribute会失效？其实是因为编辑模式下DOM处于临时的“编辑缓冲区”状态，直接调用DOM方法会和编辑状态冲突。但上面的方法都是直接操作实时DOM树，完全避开了这个问题，所以可以正常工作。

内容的提问来源于stack exchange，提问作者goethe