兼容 IE 和 Firefox 的获取 HTML 元素自定义属性的方法
在 HTML 中为元素添加自定义属性有时能带来便利。例如,为元素添加 time 属性:
<span id="span1" time="hello">示例内容</span>
在旧版 IE 浏览器中,通常可以直接通过 DOM 属性名来获取自定义属性的值:
document.getElementById('span1').time
然而,这种直接访问属性的方式在 Firefox 及其他遵循 W3C 标准的浏览器中无效。为了实现跨浏览器兼容,应使用标准的 getAttribute() 方法:
document.getElementById('span1').getAttribute('time')
该方法通过标准 DOM API 读取属性节点,在所有主流浏览器中均可正确返回自定义属性的字符串值。在现代 Web 开发中,建议优先采用 HTML5 data-* 自定义属性规范,通过 getAttribute('data-xxx') 或 element.dataset.xxx 进行读写,以彻底避免与原生 DOM 属性产生命名冲突。


