html 标签的自定义属性

html 标签的自定义属性
原创wsh900221 最后发布于2018-06-15 15:18:38 阅读数 22024  收藏
展开
自定义属性是相对于内置属性来说的。

JavaScript 操作
<input type="text" id="txtBox" displayName="123456" />

var obj = document.getElementById("txtBox");
// 读取
obj.getAttribute("displayName");
obj.attributes["displayName"].nodeValue;
// 设置
obj.setAttribute("displayName ","123456");
obj.attributes["displayName"].nodeValue = "123456";
1
2
3
4
5
6
7
8
9
jQuery 操作
方法一：attr()
设置或返回被选元素的属性值。
语法：

// 获取值
$("img").attr("src");
// 设置值
$("img").attr("src","test.jpg");
// 设置多个值
$("img").attr({ src: "test.jpg", alt: "Test Image" });
// 把src属性的值设置为title属性的值
$("img").attr("title", function() { return this.src });
1
2
3
4
5
6
7
8
方法二：data()
jQuery 1.4.3+
语法：

// 读取标签定义属性 data-[key] = [value]
$("#id").data("key");
// 设置标签定义属性
$("#id").data("key", "value");
1
2
3
4
注：
使用data设置自定义属性值，在html代码中是看不到的，但可以正常使用。
————————————————
版权声明：本文为CSDN博主「wsh900221」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wsh900221/article/details/80705859