Boş HTML5 veri öznitelikleri geçerli mi?

115

Belirtilen öğeler altında satır içi modları görüntüleyen basit bir jQuery eklentisi yazmak istiyorum. Benim fikrim, komut dosyasının öğelerde belirtilen veri özniteliklerine göre otomatik olarak başlatılmasıdır.

Çok basit bir örnek:

<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>

Merak ediyorum data-modal-target, yukarıdaki örnekte geçerli mi, yoksa olmak zorunda data-modal-target="true"mı? IE9'dan daha kötü bir şey umurumda değil, tek ihtiyacım geçerli HTML5 olması.

html  custom-data-attribute  html5-data 
— Adem
kaynak
Özel veri özelliklerinin bir değer gerektirip gerektirmediğini bulamadım; ve değeri göz ardı edip etmeyeceğimi yoksa güvenli olması için onu dahil edip etmeyeceğimden hala emin değilim. W3C teknik özellikleri kafa karıştırıcı (sürpriz değil). Değerleri kullanan betiğe bağlı olabileceğini düşünüyorum. (uzunluk sınırı nedeniyle yorum örneği aşağıda devam etmiştir).
— goodeye
Örneğin, varsayılan değerlere sahip özel veri özniteliklerine sahip bir eklenti kullanıyorum: bazı dizeler, bazı boole'lar (bu soruyu aramama yol açıyor). Boole verileri, varsayılanın doğru veya yanlış olup olmadığının bir karışımına sahiptir; var olup olmadığını veya bir değeri olup olmadığını görmek için kontrol yapıyor. Değerin doğru mu boş mu (doğru için) yoksa yanlış mı olduğunu kontrol ediyor. Ancak boşluğun kontrolü kodda açıkça belirtilmiştir; "yerleşik" değildir. Ve bir boole özelliği gerektirdiğinden data-abc = "data-abc" gibi öznitelik adını kontrol etmez; bu bir hataya neden olur.
— goodeye

Yanıtlar:

52

Geçerli, ancak boole değiller.

Özel veri öznitelikleri belirtimi , boş özniteliklerin işlenmesinde herhangi bir değişiklikten bahsetmediğinden, boş özniteliklerle ilgili genel kurallar burada geçerlidir:

Belirli öznitelikler, değer olmaksızın yalnızca öznitelik adı sağlanarak belirtilebilir.

Aşağıdaki örnekte, disabledöznitelik boş öznitelik sözdizimi ile verilmiştir:

<input disabled>

Boş öznitelik sözdiziminin, aşağıdaki örnekte olduğu gibi, öznitelik değeri olarak boş dizeyi belirtmeye tam olarak eşdeğer olduğunu unutmayın.

<input disabled="">

Dolayısıyla, boş özel veri özniteliklerini kullanmanıza izin verilir, ancak bunları boole olarak kullanmak için özel işlem gerekir.

Boş bir niteliğe eriştiğinizde, değeri "". Yanlış bir değer olduğu için, if (element.dataset.myattr)bir özniteliğin mevcut olup olmadığını kontrol etmek için kullanamazsınız .

Bunun yerine element.hasAttribute('myattr')veya if (element.dataset.myattr !== undefined)kullanmalısınız.

Lloyd'un cevabı yanlış. Microsintax boole özniteliklerine bağlantıdan bahsediyor, ancak data-*öznitelikler belirtimde boole olarak belirtilmemiş.

— kullanıcı
kaynak
"Boş öznitelik sözdiziminin, aşağıdaki örnekte olduğu gibi, öznitelik değeri olarak boş dizeyi belirtmeye tam olarak eşdeğer olduğunu unutmayın." tam olarak aradığım şeydi. Spesifik olarak, jQuery'nin scriptAttrsayarı düz bir deferdeğeri sevmez , ancak a defer: ""hile yapmalıdır. Teşekkürler!
— sfarbota
111

Evet, tamamen geçerli. Sizin durumunuzda, data-modal-targetbir boole özelliğini temsil eder:

2.4.2 Boole öznitelikleri

Bir öğede boole özniteliğinin varlığı gerçek değeri temsil eder ve özniteliğin yokluğu yanlış değeri temsil eder.

— Lloyd
kaynak
3
Güzel! Bağlantı için teşekkürler, w3.org'da gezinmek için genellikle sabrım yok :)
— Adam
4
Değerin çıkarılmasının onu bir boole özniteliğine "dönüştürdüğünü" bilmiyorum - görünüşe göre boole öznitelikleri keyfi değil; Sanırım bunların bir listesi var. Belki de tarayıcı / komut dosyası tarafından bir boole veya özel veri olarak ele alınıp alınmaması önemli değildir; ama belki de onu okuyan senaryoya bağlıdır.
— goodeye
3
Bunun değiştiğine inanıyorum. Kesinlikle kodumda kullandığım örnek bir boole olarak değil, boş bir dize olarak değerlendiriliyor. Bu nedenle, test if ($('p').data('modal-target'))çalışmaz: stackoverflow.com/questions/16864999/… .
— Derek Henderson
4
bu doğru değil gibi görünüyor element.dataset.modalTargetsahte boş dize üretir (Chrome 32) jQuery ile aynı sonuç
— H1D
20
Bu, şartnamenin yanlış yorumlanması gibi görünüyor. Bağlanmak bölüm Boole özelliklerini açıklar, ancak özel veri özelliklerine eğer demiyor olabilir Boolean niteliklerini olun.
— BoltClock
1

Bir yandan, doğrulayıcı 16.5.7 https://validator.w3.org/nu/#textarea'dan geçer :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>a</title>
</head>
<body data-asdf>
</body>
</html>

Öte yandan HTML5, data-özniteliklerin belirtiminde boole olduğunu söylemiyor : https://www.w3.org/TR/html5/dom.html#custom-data-attribute https://www.w3.org/TR/html5/forms.html#attr-input-checked gibi özelliklerchecked

— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.