如何用原生JavaScript动态获取指定div元素的自定义属性值

完全可以通过原生JavaScript动态读取对应属性值，无需硬编码。

针对现有代码的直接实现 #

你当前的HTML结构如下：

<div class="scontent" scountry="en-GB" snumber="22000"></div>

直接通过原生API获取元素、读取属性即可，替换原来硬编码的脚本内容：

// 匹配class为scontent的div元素
const targetDiv = document.querySelector('.scontent');
// 读取元素上的自定义属性
const countryVal = targetDiv.getAttribute('scountry');
const numberVal = targetDiv.getAttribute('snumber');
// 拼接输出，和原有硬编码效果完全一致
document.write(`${numberVal}${countryVal}`);

注意事项 #

• 要确保JS执行时，目标div已经完成渲染：可以把脚本标签放到div元素之后，或者监听DOMContentLoaded事件后再执行读取逻辑，避免获取元素为null报错。监听加载的示例代码：

document.addEventListener('DOMContentLoaded', function() {
  const targetDiv = document.querySelector('.scontent');
  const countryVal = targetDiv.getAttribute('scountry');
  const numberVal = targetDiv.getAttribute('snumber');
  document.write(`${numberVal}${countryVal}`);
})

规范写法建议 #

如果可以调整HTML结构，更推荐使用HTML标准规定的data-*格式自定义属性，兼容性更好、读取更简洁，也不会和未来新增的原生属性冲突。
调整后的HTML：

<div class="scontent" data-scountry="en-GB" data-snumber="22000"></div>

对应的读取代码可以直接通过元素自带的dataset属性获取，不需要调用getAttribute：

const targetDiv = document.querySelector('.scontent');
// dataset会自动把data-后面的属性名转为对象键值
const { scountry, snumber } = targetDiv.dataset;
document.write(`${snumber}${scountry}`);

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