1. 程式人生 > >html 標籤的自定義屬性

html 標籤的自定義屬性

自定義屬性是相對於內建屬性來說的。

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";

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 });

方法二:data()

// 讀取標籤定義屬性 data-[key] = [value]
$("#id").data("key"); // 設定標籤定義屬性 $("#id").data("key", "value");

注:
使用data設定自定義屬性值,在html程式碼中是看不到的,但可以正常使用。