Bir HTML etiketine özel özellik ekleyebilir miyim?

350

Aşağıdaki gibi bir HTML etiketine özel bir özellik ekleyebilir miyim?

<tag myAttri="myVal" />

html custom-attribute

— kanalının Lovespring
kaynak

3

stackoverflow.com/questions/432174/…

— Tamas Czinege

2

ve ayrıca stackoverflow.com/questions/209428/…

— Tamas Czinege

Özel niteliklerin

— Ciro Santilli 法轮功冠状 41 六四事件法轮功

Yanıtlar "evet" demesine rağmen, eklentilerle kullanılması muhtemel olmayan temalı bir özellik kümeniz olduğundan emin olun. örneğin: "veri-myuniqueattribute." Genellikle "data-" ifadesinden sonra bir tür iki harfli bir kısaltma eklerim. örneğin: "data-yscolumntype." Benzersiz tutun.

189

! DOCTYPE bildiriminizi (yani DTD) izin vermek için değiştirebilirsiniz, böylece [XML] belgesi hala geçerli olur:

<!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>
]>

#IMPLIEDbunun isteğe bağlı bir özellik olduğu veya kullanabileceğiniz #REQUIRED, vb. anlamına gelir .

Daha fazla bilgi DTD - Nitelikler .

— carillonator
kaynak

2

tüm bunları html dosyanızın en üstüne koyun (xhtml 1.0 geçişinin iyi olduğu varsayılarak)

— carillonator

8

Belki bir şey eksik, ama bu yaklaşımı takip ederseniz, işlenmiş web sayfasında]> görünür. Firefox 3.6'da bana oluyor. Alistapart.com/articles/customdtd adresindeki bu snippet bu davranışı doğrulıyor gibi görünüyor: "Bu makale için örnek dosyaları indirir ve internal.html dosyasını doğrularsanız, bunu kendiniz görebilirsiniz. Ne yazık ki, dosyayı bir tarayıcıda görüntülediğinizde ,]> ekranda görünüyor. Bu hatanın etrafında bir yol yok, bu yüzden bu yaklaşım hemen çıktı. "

— Mike

3

"]>" Görünümlerinde yardımcı olabilecek birkaç şey: Dosyayı .xhtml dosya adı uzantısıyla kaydedin. İle dosyaya MIME türünü ekleyin <meta http-equiv="content-type" content="application/xhtml+xml" />.

— LS

4

Özelliğin bildirilmesi, tarayıcı davranışı düşünüldüğünde anlamsızdır. DTD'yi okumuyorlar. Dahası, “burada kullanılan” iç altkümeyi düzgün bir şekilde atlayamazlar, bu da “]>” ölçümlerini açıklar. Beyan sadece resmi doğrulama ile ilgilidir ve üretim sayfalarında kullanılmamalıdır.

— Jukka K. Korpela

32

Bu yanıt yalnızca XHTML ve HTML 4.01 ve daha eski sürümler için geçerlidir. Ön ekleriyle kendi özniteliklerinizi oluşturabileceğinizi tamamen özlüyor data-.

— brentonstrine

300

İstediğiniz zaman öğelerinize özel özellikler ekleyebilirsiniz. Ancak bu, belgenizi geçersiz kılacaktır.

HTML 5'te, ön ekli özel veri özelliklerinidata- kullanma olanağına sahip olacaksınız .

— Bamya
kaynak

169

Unutmayın "geçersiz" hiçbir şey ifade etmez. Sayfa zamanın% 100'ünü iyi işler.

— John Farrell

22

Aslında "geçersiz" in çok gerçek sonuçları vardır. Örneğin belgenizi ilginç mod oluşturma işlemine sokabilir. Her halükarda HTML5 belgesini kullanın ve geçerli olacaksınız.

— brentonstrine

Burada farklı doküman türlerinin ve ilgili tarayıcı modlarının iyi bir tablosu vardır: hsivonen.fi/doctype/#handling . HTML5 doctype 2001 sonrası tüm tarayıcıları (Tam) Standartlar moduna geçirir. XHTML Geçişli ve HTML 4 Geçişli (özellikle DTD'siz) dokümanları yapmaz :)

— Ilya Streltsyn

kutsal tatlı mesih, teşekkür ederim. @ jfar right ama okunabilirliği azaltır.

— Nevermore

Dokümanım yine de geçersiz, çünkü bana |bir css'de izin verilmediğini söylüyor href, ancak Google Fonts

— Post Self

73

Hayır, bu doğrulamayı bozacaktır.

HTML 5'te özel özellikler ekleyebilirsiniz / ekleyebilirsiniz. Bunun gibi bir şey:

<tag data-myAttri="myVal" />

8

ama, doğrulama umurumda değil, sadece javascript tarafından erişilebilir olmasını istiyorum.

— lovespring

10

Elbette işe yarayacak. Ancak kasıtlı olarak geçersiz belgeler oluşturmak iyi bir fikir değildir.

31

Geçersiz belgeler oluşturmak harika bir fikirdir. Google, yükleme sürelerini azaltmak için bunları oluşturur, tuval kullanan her site, daha iyi bir kullanıcı deneyimi oluşturmak için bunları kullanır ve html öğelerinden anlamlı verileri çıkarmak için javascript çerçevelerini kullanmak, özel özellik tekniğini kullanarak çok daha kolaydır.

— John Farrell

3

@jfar: Tuval geçersiz değil. HTML 4.01'de değil; ancak, yaklaşan HTML5 spesifikasyonunun mükemmel bir yasal parçasıdır.

— bcat

3

Ne demek "geçersiz değil"? Kabul edilen herhangi bir şartnamenin bir parçası değildir. Mevcut olmayan bir spesifikasyona göre bir şey nasıl geçerli olabilir?

— John Farrell

34

JQuery data()işlevi, rastgele verileri DOM öğeleriyle ilişkilendirmenize olanak tanır. İşte bir örnek .

— DRAEMON
kaynak

1

Bu altın.

— Trevor Wood

1

@TrevorWood ve kırık (bağlantı).

— Akash Agarwal

23

HTML5'te: evet: data niteliğini kullanın .

 <ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>

— Davide Andrea
kaynak

5

Daha iyi otorite: developer.mozilla.org/tr-TR/docs/Learn/HTML/Howto/…

— Zuks

11

Evet, sen, sen, söz kendisinde yaptım edebilirsiniz: <html myAttri="myVal"/>.

— luvieere
kaynak

2

HTML'yi neyi tanımladığınıza bağlıdır. HTML'yi, belirli bir öğe ve öznitelik kümesiyle SGML'yi temel alan bir dil olarak düşünüyorum. XHTML, XML'e çok benzeyen belirli bir öğe ve özellik kümesine sahip XML'deki bir varyanttır. Kendi özniteliklerinizi kullandığınızda, bu hala XML SGML'dir, ancak bence XHTML'nin HTML'si değil.

— Douwe Maan

Adhoc uzantısı olarak kabul edin, katı bir anlamda bir standart değil, özel özellikler içeriyorsa ayrıştırmada başarısız olmaması gerektiği şartı bir tür uygulama.

— luvieere

2

DouweM: Tabii ki, HTML5'in HTML serileştirmesi var, bu da ne SGML ne de XML değil.

— bcat

2

Ve bu süreçte belgeyi kırdınız (geçersiz kıldınız). İyi uygulama değil.

— 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>

Snippet'i genişlet

— Jasim Droid
kaynak

2

Lütfen cevabınıza kısa bir açıklama ekleyin.

— Nikolay Mihaylov

10

Evet, bunu yapabilirsin!

Sonraki HTMLetikete sahip olmak :

<tag key="value"/>

Özelliklerine aşağıdakilerle erişebiliriz JavaScript:

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

Element.setAttribute()özelliği HTMLyoksa etikete yerleştirin. Yani, HTMLeğer onu ayarlayacaksanız , kodda bildirmeniz gerekmez JavaScript.

key: geçerli etiket için kullanılmamışken, özellik için istediğiniz herhangi bir ad olabilir. value: her zaman ihtiyacınız olanı içeren bir dize.

— IgniteCoders
kaynak

7

JavaScript'ten özellikler ayarlayabilirsiniz.

document.getElementById("foo").myAttri = "myVal"

— ewg
kaynak

4

İşte örnek:

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

Gövde etiketi öğesine özel niteliklerin nasıl ayarlanacağına ilişkin başka bir örnek:

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

Ardından özelliği şu şekilde okuyun:

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

DevTools'ta Konsolda yukarıdaki kodu test edebilirsiniz , ör.

— kenorb
kaynak

1

herhangi bir veri kullanın, onları çok kullanıyorum

<aside data-area="asidetop" data-type="responsive" class="top">

— Erick Boileau
kaynak

data-*JavaScript'ten değerleri nasıl alırsınız ?

— Aaron Franke

0

Temiz ve belgeyi geçerli tutacak başka bir yaklaşım, istediğiniz verileri başka bir etikete birleştirmek, örneğin id, sonra istediğinizi almak için split'i kullanmaktır.

<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
kaynak

0

Ekleyebilirsiniz, ancak bir satır JavaScript kodu da yazmanız gerekir,

document.createElement('tag');

her şeyin yerine oturduğundan emin olmak için. Internet Explorer demek istiyorum :)

— defau1t
kaynak

3

Etiket adı IE tarafından bilinmiyorsa, bu alakalı olacaktır. Burada sorun özel bir etiket değil, özel bir özelliktir; buradaki "etiket" kelimesi, <tag ...>görünüşe göre yalnızca herhangi bir HTML etiketi anlamına gelir.

— Jukka K. Korpela

Bu XHTML'yi de geçersiz kılmaz (tanınan bir etiket değilse)?

— Paul

0

iyi! veri özniteliklerini gerçekte istediğiniz şekilde gizleyerek bir grup özel HTML özelliği oluşturabilirsiniz.

Örneğin.

[attribute='value']{
color:red;
}

<span attribute="value" >hello world</span>

Görünüşe göre çalışıyor, ancak belgenizi geçersiz kılar, özel niteliklere veya hatta öğelere sahip olmanız için JScript kullanmaya gerek yoktur, sadece yeni formüle edilmiş (özel) niteliklerinize aynı şekilde davranmanız gerekir. "data" özelliği

Unutmayın "geçersiz" hiçbir şey ifade etmez. Belge her zaman iyi yüklenir. ve bazı tarayıcılar belgenizi yalnızca DOCTYPE'ın varlığıyla doğrulardı ..... aslında ne demek istediğimi biliyorsunuz.

— Abdulbasit
kaynak

-8

Bir özellik yerine JavaScript'ten istediğiniz değeri ayıklamak için böyle bir şey yapabilirsiniz:

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>

— Kurbağa
kaynak

Nitelikler bir nedenden dolayı var; gibi şeyler <input type="hidden" value="...">. Bununla birlikte, gizli bir alana koyabileceğiniz verilerin aksine, çeşitli özelliklerde koyduğunuz veri türü arasındaki farkı göz önünde bulundurun. Bir meta veriyi korumak adına bir <span>şeyi <a>saklamak iyi bir hareket değildir. Sitenize özgü ve JS'ye (zarif bozulma, insanlar) çok bağlı olacaktır.

— Jay Edwards