Bisakah saya menambahkan atribut khusus ke tag HTML?

348

Bisakah saya menambahkan atribut khusus ke tag HTML seperti berikut ini?

<tag myAttri="myVal" />
html custom-attribute lovespring
sumber
3
stackoverflow.com/questions/432174/…
Tamas Czinege
2
dan juga stackoverflow.com/questions/209428/…
Tamas Czinege
kemungkinan duplikat atribut Kustom - Ya atau tidak?
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Meskipun jawaban mengatakan "ya," pastikan Anda memiliki sekumpulan atribut bertema yang kemungkinan tidak akan digunakan dengan plug-in. mis .: "data-myuniqueattribute." Saya biasanya hanya awalan apa pun setelah "data-" dengan beberapa jenis singkatan dua huruf. misal: "tipe data-yscolumn." Tetap unik.

Jawaban:

189

Anda dapat mengubah deklarasi! DOCTYPE Anda (yaitu DTD) untuk mengizinkannya, sehingga dokumen [XML] tetap valid:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
  <!ATTLIST tag myAttri CDATA #IMPLIED>
]>

#IMPLIEDberarti itu adalah atribut opsional, atau Anda dapat menggunakan #REQUIRED, dll.

Informasi lebih lanjut ada di DTD - Attributes .

carillonator
sumber
2
hanya menempatkan semua yang di bagian atas file html Anda (dengan asumsi xhtml 1.0 transisi ok)
carillonator
8
Mungkin saya kehilangan sesuatu, tetapi jika Anda mengikuti pendekatan ini,]> muncul di halaman web yang diberikan. Terjadi pada saya di Firefox 3.6. Cuplikan ini dari alistapart.com/articles/customdtd tampaknya memverifikasi perilaku ini: "Jika Anda mengunduh file sampel untuk artikel ini dan memvalidasi file internal.html, Anda dapat melihatnya sendiri. Sayangnya, saat Anda menampilkan file di browser , the]> muncul di layar. Tidak ada jalan lain untuk mengatasi bug ini, jadi pendekatan ini benar. "
Mike
3
Beberapa hal yang dapat membantu dengan penampilan "]>": Simpan file dengan ekstensi nama file .xhtml. Sertakan tipe MIME dalam file dengan <meta http-equiv="content-type" content="application/xhtml+xml" />.
LS
4
Mendeklarasikan atribut tidak ada gunanya sejauh perilaku browser dianggap. Mereka tidak membaca DTD. Selain itu, mereka bahkan tidak dapat melewatkan subset internal dengan benar (yang digunakan di sini), yang menjelaskan meass “]>”. Deklarasi hanya akan relevan untuk validasi formal, dan tidak boleh digunakan pada halaman produksi.
Jukka K. Korpela
32
Jawaban ini hanya berlaku untuk XHTML dan HTML 4.01 dan lebih lama. Benar-benar kehilangan bahwa Anda sekarang dapat membuat atribut Anda sendiri jika Anda awalan dengan data-.
brentonstrine
299

Anda dapat menambahkan atribut khusus ke elemen Anda sesuka hati. Tetapi itu akan membuat dokumen Anda tidak valid.

Di HTML 5 Anda akan memiliki kesempatan untuk menggunakan atribut data khusus yang diawali dengandata- .

Gumbo
sumber
169
Ingat "tidak valid" tidak ada artinya. Halaman ini akan menghasilkan denda 100% dari waktu.
John Farrell
22
Sebenarnya "tidak valid" memiliki implikasi yang sangat nyata. Misalnya dapat menempatkan dokumen Anda ke rendering quirksmode. Bagaimanapun, gunakan doctype HTML5 dan Anda akan valid.
brentonstrine
Ada tabel bagus dari berbagai jenis dokumen dan mode peramban yang sesuai di sini: hsivonen.fi/doctype/#handling . Doctype HTML5 mengalihkan semua browser pasca-2001 ke mode Standar (Penuh). XHTML Transitional dan HTML 4 Transitional (terutama tanpa DTD) tidak :) :)
Ilya Streltsyn
kristus yang manis, terima kasih. @ Jfar benar tetapi mengurangi keterbacaan.
Nevermore
Lagi pula, dokumen saya tidak valid, karena ia memberi tahu saya |tidak diizinkan dalam csshrefBagaimanapun juga, , tetapi itulah yang diperlukan untuk Google Fonts
Posting Mandiri
73

Tidak, ini akan memecah validasi.

Dalam HTML 5 Anda dapat / akan dapat menambahkan atribut khusus. Sesuatu seperti ini:

<tag data-myAttri="myVal" />

sumber
8
tapi, saya tidak peduli validasi, saya hanya ingin itu bisa diakses dengan javascript.
lovespring
10
Tentu saja itu akan berhasil. Tapi sengaja membuat dokumen yang tidak valid bukanlah ide yang bagus.
31
Membuat dokumen yang tidak valid adalah ide bagus. Google membuat mereka untuk mengurangi waktu muat, setiap situs menggunakan kanvas menggunakannya untuk menciptakan pengalaman pengguna yang lebih baik, dan menggunakan kerangka kerja javascript untuk menarik data yang bermakna dari elemen html jauh lebih mudah menggunakan teknik atribut khusus.
John Farrell
3
@ jfar: Kanvas tidak valid. Itu tidak ada dalam HTML 4.01; namun, ini adalah bagian yang sah menurut hukum dari spesifikasi HTML5 mendatang.
bcat
3
Apa maksudmu "tidak tidak valid"? Ini bukan bagian dari spesifikasi yang diterima. Bagaimana sesuatu bisa valid terhadap spesifikasi yang tidak ada?
John Farrell
34

Fungsi jQuery data()memungkinkan Anda untuk mengaitkan data sewenang-wenang dengan elemen DOM. Ini sebuah contoh .

Draemon
sumber
1
Ini emas.
Trevor Wood
1
@ TrevorWood dan rusak (tautannya).
Akash Agarwal
11

Ya, Anda dapat, Anda melakukannya di pertanyaan itu sendiri: <html myAttri="myVal"/>.

luvieere
sumber
2
Tergantung pada apa yang Anda definisikan sebagai HTML. Saya menganggap HTML sebagai bahasa berdasarkan SGML, dengan sekumpulan elemen dan atribut tertentu. XHTML adalah varian pada XML, dengan serangkaian elemen dan atribut khusus yang mirip dengan HTML. Ketika Anda menggunakan atribut Anda sendiri, itu masih SGML dari XML, tetapi bukan lagi HTML dari XHTML menurut saya.
Douwe Maan
Anggap saja sebagai ekstensi adhoc, bukan standar dalam arti yang ketat, tetapi semacam implementasi persyaratan yang seharusnya tidak gagal diurai jika berisi atribut khusus.
luvieere
2
DouweM: Tentu saja, selalu ada serialisasi HTML dari HTML5, yang bukan SGML atau XML.
bcat
2
Dan Anda mematahkan (membatalkan) dokumen dalam proses. Bukan latihan yang bagus.
carillonator
10 

var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar
<div id="demo" data-myvar="foo">anything</div>
Luaskan cuplikan

Jasim Droid
sumber
2
Silakan tambahkan penjelasan singkat untuk jawaban Anda.
Nikolay Mihaylov
10

Ya kamu bisa melakukannya!

Memiliki HTMLtag berikutnya :

<tag key="value"/>

Kita dapat mengakses atribut mereka dengan JavaScript:

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter

Element.setAttribute()letakkan atribut di HTMLtag jika tidak ada. Jadi, Anda tidak perlu mendeklarasikannya dalam HTMLkode jika Anda ingin mengaturnya JavaScript.

key: bisa berupa nama yang Anda inginkan untuk atribut, sementara belum digunakan untuk tag saat ini. value: selalu berupa string yang berisi apa yang Anda butuhkan.

IgniteCoders
sumber
7

Anda dapat mengatur properti dari JavaScript.

document.getElementById("foo").myAttri = "myVal"
ewg
sumber
4

Berikut ini contohnya:

document.getElementsByTagName("html").foo="bar"

Berikut adalah contoh lain cara mengatur atribut khusus ke dalam elemen tag tubuh:

document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";

Kemudian baca atributnya dengan:

attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2

Anda dapat menguji kode di atas di Konsol di DevTools, mis

JS Console, DevTools di Chrome

kenorb
sumber
1

gunakan data apa saja, saya sering menggunakannya

<aside data-area="asidetop" data-type="responsive" class="top">
Erick Boileau
sumber
Bagaimana Anda mendapatkan data-*nilai dari JavaScript?
Aaron Franke
0

Pendekatan lain, yang bersih dan akan membuat dokumen tetap valid, adalah menggabungkan data yang Anda inginkan ke dalam tag lain misalnya id, kemudian gunakan split untuk mengambil apa yang Anda inginkan saat Anda menginginkannya. 

<html>
<script>
  function demonstrate(){
    var x = document.getElementById("example data").querySelectorAll("input");
    console.log(x);
    for(i=0;i<x.length;i++){
      var line_to_illustrate = x[i].id  + ":" + document.getElementById ( x[i].id ).value;
      //concatenated values
      console.log("this is all together: " + line_to_illustrate); 
      //split values
      var split_line_to_illustrate = line_to_illustrate.split(":");
      for(j=0;j<split_line_to_illustrate.length;j++){
        console.log("item " + j+ " is: " + split_line_to_illustrate[j]);
      }      
    }
  }
</script> 

<body>

<div id="example data">
  <!-- consider the id values representing a 'from-to' relationship -->
  <input id="1:2" type="number" name="quantity" min="0" max="9" value="2">
  <input id="1:4" type="number" name="quantity" min="0" max="9" value="1">
  <input id="3:6" type="number" name="quantity" min="0" max="9" value="5">  
</div>

<input type="button" name="" id="?" value="show me" onclick="demonstrate()"/>

</body>
</html>
CAtoOH
sumber
0

Anda dapat menambahkan, tetapi kemudian Anda harus menulis satu baris kode JavaScript juga,

document.createElement('tag');

untuk memastikan semuanya jatuh pada tempatnya. Maksud saya Internet Explorer :)

defau1t
sumber
3
Ini akan relevan jika nama tag tidak dikenal oleh IE. Di sini masalahnya adalah atribut khusus, bukan tag khusus; kata "tag" di <tag ...>sini tampaknya berarti sembarang tag HTML.
Jukka K. Korpela
Bukankah ini juga membatalkan XHTML (kecuali itu tag yang dikenali)?
Paul
0

baik! Anda sebenarnya dapat membuat banyak atribut HTML khusus dengan menyamarkan atribut data sesuai keinginan Anda.

misalnya. 

[attribute='value']{
color:red;
}
<span attribute="value" >hello world</span>

Tampaknya berhasil tetapi itu akan membatalkan dokumen Anda, tidak perlu menggunakan JScript untuk Anda memiliki atribut khusus atau bahkan elemen kecuali Anda harus, Anda hanya perlu memperlakukan atribut yang dirumuskan (kustom) baru Anda seperti cara Anda memperlakukan Anda atribut "data"

Ingat "tidak valid" tidak berarti apa-apa. Dokumen akan dimuat dengan baik setiap saat. dan beberapa browser benar-benar akan memvalidasi dokumen Anda hanya dengan kehadiran DOCTYPE ....., Anda benar-benar tahu apa yang saya maksud.

Abdulbasit
sumber
-8

Anda dapat melakukan sesuatu seperti ini untuk mengekstraksi nilai yang Anda inginkan dari JavaScript alih-alih atribut:

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>
Katak
sumber
Atribut ada karena suatu alasan; seperti halnya hal-hal seperti <input type="hidden" value="...">. Namun, pertimbangkan perbedaan antara tipe data yang Anda masukkan ke dalam berbagai atribut berbeda dengan data yang mungkin Anda masukkan ke dalam bidang tersembunyi. Menyembunyikan <span>(dari semua hal) <a>demi mempertahankan sepotong metadata bukanlah langkah yang baik. Ini akan menjadi khas untuk situs Anda dan sangat tergantung pada JS (degradasi anggun, orang).
Jay Edwards