HTML 标签自定义属性的问题

最新推荐文章于 2025-07-18 17:10:48 发布

holmes89757

最新推荐文章于 2025-07-18 17:10:48 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript HTML 文章标签： Web前端 javascript html 浏览器

本文链接：https://blog.csdn.net/holmes89757/article/details/51683055

JavaScript 同时被 2 个专栏收录

5 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

本文介绍如何在HTML中自定义属性，并讨论了不同浏览器的兼容性问题。通过JavaScript和jQuery可以轻松读取和修改这些自定义属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 标签里可以自定义属性，但要考虑到浏览器兼容性的问题。

写一段 HTML 代码如下：

<div id='test' myAttr='testAttr'><div>

在这个 <div> 标签里，我们自定义了一个属性 “myAttr” ，它的属性值为 “testAttr” 。如果定义一个属性却不使用它，那么这个属性是没有任何意义的。接下来我们在 JavaScript 里来调用这个属性：

var test = document.getElementById(test);
<pre name="code" class="html">alert(test.getAttribute('myAttr'));
test.setAttribute('myAttr', 'newAttr')<pre name="code" class="javascript"><pre name="code" class="html">alert(test.getAttribute('myAttr'));

经过测试，以上这段代码在所有浏览器里都有效。运行后会依次弹出 “testAttr” 和 "newAttr" 。

在 IE 5-8 里，以下代码也可以使用：

var test = document.getElementById(test);
<pre name="code" class="html">alert(test.myAttr);
test.myAttr = 'newAttr';
alert(test.myAttr);

以上代码运行后会依次弹出 "testAttr" 和 "newAttr" 。

当然，使用 jQuery 也可以做到全部兼容：

alert(
$("#test").attr("myAttr")
);
<pre name="code" class="html">$("#test").attr("myAttr", "newAttr");
alert(<pre name="code" class="javascript"><pre name="code" class="html">$("#test").attr("myAttr")

);

自定义属性一般是我们用来存储数据或是相关依据的。根据实际情况，自定义属性其实是很有用的。