如何用JavaScript为最后一个自定义HRDIV设属性并将其隐藏

嘿，我来帮你搞定这个需求！其实用几行JavaScript就能轻松实现，思路很清晰：先定位到最后一个HRDIV元素，给它设置属性，再把它隐藏起来。

具体实现代码 #

首先，我们可以用CSS选择器直接定位到最后一个目标元素，然后执行操作：

// 定位页面中最后一个class为HRDIV的元素
const lastHRDiv = document.querySelector('.HRDIV:last-of-type');

// 先给它设置自定义属性（这里以data属性为例，你可以换成任何需要的属性）
lastHRDiv.setAttribute('data-status', 'processed');
// 如果是设置标准属性比如id，直接赋值更简洁：lastHRDiv.id = 'final-hrdiv';

// 接着隐藏这个元素，这里提供两种常用方式：
// 方式1：直接设置行内样式隐藏
lastHRDiv.style.display = 'none';

// 方式2：添加CSS类（推荐，更符合样式与行为分离的原则）
// 先在CSS里定义：.hidden { display: none; }
// lastHRDiv.classList.add('hidden');

额外的容错处理 #

如果页面中可能不存在HRDIV元素，建议加个判断避免报错：

const lastHRDiv = document.querySelector('.HRDIV:last-of-type');

if (lastHRDiv) {
  lastHRDiv.setAttribute('data-status', 'processed');
  lastHRDiv.classList.add('hidden');
}

这样就万无一失啦，不管页面里有没有目标元素，代码都能正常运行～

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