แอตทริบิวต์ข้อมูล HTML5 ว่างถูกต้องหรือไม่

115

ฉันต้องการเขียนปลั๊กอิน jQuery ง่ายๆที่แสดงโมดอลแบบอินไลน์ภายใต้องค์ประกอบที่ระบุ ความคิดของฉันคือให้สคริปต์เริ่มต้นโดยอัตโนมัติตามแอตทริบิวต์ข้อมูลที่ระบุในองค์ประกอบ

ตัวอย่างพื้นฐาน:

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

ฉันแค่สงสัยว่าdata-modal-targetในตัวอย่างข้างต้นถูกต้องหรือไม่data-modal-target="true"? ฉันไม่สนใจอะไรที่บ้ากว่า IE9 ฯลฯ ข้อกำหนดเดียวของฉันคือมันเป็น HTML5 ที่ถูกต้อง

html custom-data-attribute html5-data

— อาดัม
แหล่งที่มา

ฉันไม่พบว่าแอตทริบิวต์ข้อมูลที่กำหนดเองต้องการค่าหรือไม่ และยังไม่แน่ใจว่าจะละค่าหรือเพียงแค่รวมไว้เพื่อความปลอดภัย ข้อมูลจำเพาะของ W3C นั้นสับสน (ไม่แปลกใจเลย) ฉันคิดว่ามันอาจขึ้นอยู่กับสคริปต์ที่ใช้ค่า (ตัวอย่างความคิดเห็นต่อด้านล่างเนื่องจากขีดจำกัดความยาว)

— goodeye

เช่นฉันใช้ปลั๊กอินที่มีแอตทริบิวต์ข้อมูลที่กำหนดเองพร้อมค่าเริ่มต้น: สตริงบางตัวบูลีนบางตัว (ทำให้ฉันมองหาคำถามนี้) ข้อมูลบูลีนมีการผสมผสานกันว่าค่าเริ่มต้นเป็นจริงหรือเท็จ กำลังทำการตรวจสอบเพื่อดูว่ามีอยู่หรือมีค่า กำลังตรวจสอบว่าค่าเป็นจริงหรือว่าง (สำหรับจริง) หรือเท็จ แต่การตรวจสอบช่องว่างนั้นชัดเจนในรหัส ไม่ใช่ "ในตัว" และไม่ได้ตรวจสอบชื่อแอตทริบิวต์เช่น data-abc = "data-abc" เนื่องจากแอตทริบิวต์บูลีนต้องการ ทำให้เกิดข้อผิดพลาด

— goodeye

52

ถูกต้อง แต่ไม่ใช่บูลีน

ข้อกำหนดแอตทริบิวต์ข้อมูลที่กำหนดเองไม่ได้กล่าวถึงการเปลี่ยนแปลงใด ๆ ในการจัดการแอตทริบิวต์ที่ว่างเปล่าดังนั้นกฎทั่วไปเกี่ยวกับแอตทริบิวต์ว่างจึงใช้ที่นี่

อาจระบุแอตทริบิวต์บางอย่างได้โดยระบุเพียงชื่อแอตทริบิวต์โดยไม่มีค่า

ในตัวอย่างต่อไปนี้disabledแอตทริบิวต์จะได้รับด้วยไวยากรณ์ของแอตทริบิวต์ว่าง:
<input disabled>
โปรดทราบว่าไวยากรณ์ของแอตทริบิวต์ว่างนั้นเทียบเท่ากับการระบุสตริงว่างเป็นค่าสำหรับแอตทริบิวต์ดังตัวอย่างต่อไปนี้
<input disabled="">

ดังนั้นคุณจึงได้รับอนุญาตให้ใช้แอตทริบิวต์ข้อมูลที่กำหนดเองที่ว่างเปล่า แต่จำเป็นต้องมีการจัดการพิเศษเพื่อใช้เป็นบูลีน

""เมื่อคุณมีการเข้าถึงแอตทริบิวต์ที่ว่างเปล่าค่าที่เป็น เนื่องจากเป็นค่าที่ไม่ถูกต้องคุณจึงไม่สามารถใช้if (element.dataset.myattr)เพื่อตรวจสอบว่ามีแอตทริบิวต์อยู่หรือไม่

คุณควรใช้element.hasAttribute('myattr')หรือif (element.dataset.myattr !== undefined)แทน

คำตอบของลอยด์ผิด เขากล่าวถึงการเชื่อมโยงไปยัง microsyntax แอตทริบิวต์บูลีน แต่data-*แอตทริบิวต์ไม่ได้ระบุเป็นบูลีนในข้อมูลจำเพาะ

— ผู้ใช้งาน
แหล่งที่มา

"โปรดทราบว่าไวยากรณ์ของแอตทริบิวต์ว่างนั้นเทียบเท่ากับการระบุสตริงว่างเป็นค่าสำหรับแอตทริบิวต์ดังตัวอย่างต่อไปนี้" คือสิ่งที่ฉันกำลังค้นหา โดยเฉพาะการscriptAttrsตั้งค่าของ jQuery ไม่ชอบdeferค่าธรรมดาแต่defer: ""ควรทำเคล็ดลับ ขอบคุณ!

— sfarbota

111

ใช่ใช้ได้อย่างสมบูรณ์แบบ ในกรณีของคุณdata-modal-targetจะแสดงแอตทริบิวต์บูลีน:

2.4.2 คุณลักษณะบูลีน

การมีแอตทริบิวต์บูลีนในองค์ประกอบแสดงถึงค่าที่แท้จริงและการไม่มีแอตทริบิวต์แสดงถึงค่าเท็จ

— ลอยด์
แหล่งที่มา

3

ดี! ขอบคุณสำหรับลิงค์ฉันมักจะไม่มีความอดทนในการลุย w3.org :)

— อดัม

4

ฉันไม่ทราบว่าการละเว้นค่า "เปลี่ยนเป็น" แอตทริบิวต์บูลีนดูเหมือนว่าแอตทริบิวต์บูลีนไม่ได้เป็นไปตามอำเภอใจ ฉันคิดว่ามีรายชื่ออยู่ บางทีมันไม่สำคัญว่าจะถือว่าเป็นข้อมูลบูลีนหรือข้อมูลที่กำหนดเองโดยเบราว์เซอร์ / สคริปต์ แต่อาจขึ้นอยู่กับบทที่อ่าน

— goodeye

3

ฉันเชื่อว่าสิ่งนี้มีการเปลี่ยนแปลง แน่นอนว่าตัวอย่างที่ฉันใช้ในโค้ดของฉันไม่ได้ถูกถือว่าเป็นบูลีน แต่เป็นสตริงว่าง ดังนั้นการทดสอบif ($('p').data('modal-target'))จะไม่ทำงาน: stackoverflow.com/questions/16864999/...

— Derek Henderson

4

ดูเหมือนว่าสิ่งนี้ไม่เป็นความจริงelement.dataset.modalTargetจะสร้างสตริงว่างซึ่งเป็นผลลัพธ์ที่ไม่ถูกต้อง (Chrome 32) เดียวกันกับ jQuery

— H1D

20

ดูเหมือนว่าจะเป็นการตีความข้อมูลจำเพาะที่ผิดพลาด ส่วนที่คุณเชื่อมโยงเพื่ออธิบายแอตทริบิวต์บูลีน แต่ไม่ได้ระบุว่าแอตทริบิวต์ข้อมูลที่กำหนดเองสามารถเป็นแอตทริบิวต์บูลีนได้หรือไม่

— BoltClock

1

ใช่เป็นไวยากรณ์ที่ถูกต้องที่จะละค่าสำหรับแอตทริบิวต์ข้อมูลที่กำหนดเอง

"แอตทริบิวต์สามารถระบุได้สี่วิธี:

ไวยากรณ์แอตทริบิวต์ว่างเพียงชื่อแอตทริบิวต์ ค่าเป็นสตริงว่างโดยปริยาย [... ] " https://developers.whatwg.org/syntax.html#attributes-0

— eew
แหล่งที่มา

1

ในอีกด้านหนึ่งจะผ่าน validator 16.5.7 https://validator.w3.org/nu/#textarea :

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

ในทางกลับกัน HTML5 ไม่ได้ระบุไว้ในข้อกำหนดของdata-แอตทริบิวต์ว่าเป็นบูลีน: https://www.w3.org/TR/html5/dom.html#custom-data-attributeในขณะที่ระบุไว้อย่างชัดเจนสำหรับบูลีนอื่น ๆ แอตทริบิวต์เช่นchecked https://www.w3.org/TR/html5/forms.html#attr-input-checked

— Ciro Santilli 郝海东冠状病六四事件法轮功
แหล่งที่มา