HTML5自定義屬性

2021-07-10 13:43:12 字數 1027 閱讀 5015

你可以去讀一下html5的詳細規範,但這個自定義data屬性的用法非常的簡單,就是你可以往html標籤上新增任意以"data-"開頭的屬性,這些屬性頁面上是不顯示的,它不會影響到你的頁面布局和風格,但它卻是可讀可寫的。

下面的乙個**片段是乙個有效的html5標記:

some awesome data

可是,怎麼來讀取這些資料呢?你當然可以遍歷頁面元素來讀取你想要的屬性,但jquery已經內建了方法來操作這些屬性。使用jquery的.data()方法來訪問這些"data-*"屬性。其中乙個方法就是.data(obj),這個方法是在jquery1.4.3版本後出現的,它能返回相應的data屬性。

舉個例子,你可以用下面的寫法讀取data-myid屬性值:

var myid= jquery("#awesome").data('myid');

console.log(myid);

你還可以在"data-*"屬性裡使用json語法,例如,如果你寫出下面的html:

你可以通過js直接訪問這個資料,通過json的key值,你能得到相應的value:

var gamestatus= jquery("#awesome-json").data('awesome').game;

console.log(gamestatus);

你也可以通過.data(key,value)方法直接給"data-*"屬性賦值。乙個重要的你要注意的事情是,這些"data-*"屬性應該和它所在的元素有一定的關聯,不要把它當成存放任意東西的儲存工具。

譯者補充:儘管"data-*"是html5才出現的屬性,但jquery是通用的,所以,在非html5的頁面或瀏覽器裡,你仍然可以使用.data(obj)方法來操作"data-*"資料。

HTML5自定義屬性

自定義屬性的出現並非始於html5,但html5將 data 真正合法化。data自定義屬性如何操作?有何用途?首先給定一段html this is a div elem this is a div elem,too 注意 1.自定義屬性用來儲存或運算元據,可讀可寫,但不會在頁面顯示 2.屬性值可以...

HTML5自定義data屬性

可能大家在使用jquery mobile時,經常會看到data role data theme等的使用,比如 通過如下 即可實現頁首的效果 通過手機瀏覽,效果如下 為什麼寫乙個data role header 就能實現底部為黑色 文字居中顯示的效果呢?我們寫乙個html頁面,自定義乙個data ch...

HTML5 自定義屬性 dataset

dataset 屬性的 值是 domstringmap 的乙個例項,也就是乙個名值對兒的對映。在這個對映中,每個 data name 形式 的屬性都會有乙個對應的屬性,只不過屬性名沒有 data 字首 本例中使用的方法僅用於演示 var div document.getelementbyid myd...