Các thuộc tính dữ liệu HTML5 trống có hợp lệ không?

115

Tôi muốn viết một plugin jQuery đơn giản hiển thị các phương thức nội tuyến dưới các phần tử được chỉ định. Ý tưởng của tôi là để tập lệnh tự động khởi động dựa trên các thuộc tính dữ liệu được chỉ định trên các phần tử.

Một ví dụ rất cơ bản:

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

Tôi chỉ tự hỏi nếu data-modal-targettrong ví dụ trên là hợp lệ, hay nó phải được data-modal-target="true"? Tôi không quan tâm đến bất cứ thứ gì phức tạp hơn IE9, v.v., yêu cầu duy nhất của tôi là nó phải là HTML5 hợp lệ.

html custom-data-attribute html5-data

— Adam
nguồn

Tôi không thể tìm thấy các thuộc tính dữ liệu tùy chỉnh có yêu cầu giá trị hay không; và vẫn không chắc liệu có nên bỏ qua giá trị hay chỉ bao gồm giá trị đó để an toàn. Thông số kỹ thuật của W3C là khó hiểu (không có gì ngạc nhiên). Tôi nghĩ rằng nó có thể phụ thuộc vào tập lệnh sử dụng các giá trị. (bình luận ví dụ tiếp tục bên dưới, do giới hạn độ dài).

— goodeye

ví dụ: tôi đang sử dụng một trình cắm thêm có các thuộc tính dữ liệu tùy chỉnh với các giá trị mặc định: một số chuỗi, một số boolean (tôi sẽ tìm câu hỏi này). Dữ liệu boolean có sự kết hợp giữa giá trị mặc định là đúng hay sai; nó đang thực hiện việc kiểm tra xem nó có tồn tại hoặc có giá trị hay không. Nó kiểm tra xem giá trị là true hay rỗng (đối với true) hoặc false. Nhưng việc kiểm tra giá trị trống là rõ ràng trong mã; nó không phải là "tích hợp sẵn". Và, nó không kiểm tra tên thuộc tính, như data-abc = "data-abc" như thuộc tính boolean yêu cầu; điều này gây ra lỗi.

— goodeye

52

Hợp lệ, nhưng chúng không phải là boolean.

Đặc tả thuộc tính dữ liệu tùy chỉnh không đề cập đến bất kỳ thay đổi nào đối với việc xử lý thuộc tính trống, vì vậy các quy tắc chung về thuộc tính trống sẽ áp dụng tại đây:

Một số thuộc tính có thể được chỉ định bằng cách chỉ cung cấp tên thuộc tính, không có giá trị.

Trong ví dụ sau, disabledthuộc tính được cung cấp với cú pháp thuộc tính trống:
<input disabled>
Lưu ý rằng cú pháp thuộc tính rỗng hoàn toàn tương đương với việc chỉ định chuỗi trống làm giá trị cho thuộc tính, như trong ví dụ sau.
<input disabled="">

Vì vậy, bạn được phép sử dụng các thuộc tính dữ liệu tùy chỉnh trống, nhưng cần phải xử lý đặc biệt để sử dụng chúng dưới dạng boolean.

Khi bạn đang truy cập một thuộc tính trống, giá trị của nó là "". Vì đó là một giá trị giả, bạn không thể chỉ sử dụng if (element.dataset.myattr)để kiểm tra xem một thuộc tính có hiện diện hay không.

Bạn nên sử dụng element.hasAttribute('myattr')hoặc if (element.dataset.myattr !== undefined)thay thế.

Câu trả lời của Lloyd là sai. Ông đề cập đến liên kết đến các thuộc tính boolean microsyntax, nhưng data-*các thuộc tính không được chỉ định là boolean trong thông số kỹ thuật.

— người sử dụng
nguồn

"Lưu ý rằng cú pháp thuộc tính rỗng hoàn toàn tương đương với việc chỉ định chuỗi trống làm giá trị cho thuộc tính, như trong ví dụ sau." chính xác là những gì tôi đang tìm kiếm. Cụ thể, scriptAttrscài đặt của jQuery không thích một defergiá trị thuần túy , nhưng một giá trị defer: ""sẽ thực hiện được. Cảm ơn!

— sfarbota

111

Vâng, hoàn toàn hợp lệ. Trong trường hợp của bạn, data-modal-targetsẽ đại diện cho một thuộc tính boolean:

2.4.2 Các thuộc tính Boolean

Sự hiện diện của thuộc tính boolean trên một phần tử biểu thị giá trị true và sự vắng mặt của thuộc tính biểu thị giá trị sai.

— Lloyd
nguồn

3

Đẹp! Cảm ơn vì liên kết, tôi thường không đủ kiên nhẫn để lội qua w3.org :)

— Adam

4

Tôi không biết việc bỏ qua giá trị "biến nó thành" thuộc tính boolean - có vẻ như các thuộc tính boolean không phải là tùy ý; Tôi nghĩ có một danh sách trong số họ. Có thể không thành vấn đề nếu nó được trình duyệt / script xử lý như một boolean hoặc dữ liệu tùy chỉnh; nhưng có lẽ nó phụ thuộc vào kịch bản đọc nó.

— goodeye

3

Tôi tin rằng điều này đã thay đổi. Chắc chắn rằng ví dụ tôi đang sử dụng trong mã của mình không được coi là boolean mà là một chuỗi rỗng. Vì vậy, thử nghiệm if ($('p').data('modal-target'))sẽ không hoạt động: stackoverflow.com/questions/16864999/… .

— Derek Henderson

4

ngoại hình như thế này là không đúng sự thật element.dataset.modalTargetsẽ tạo ra chuỗi rỗng mà là falsy (Chrome 32) cùng kết quả với jQuery

— H1D

20

Đây dường như là một cách hiểu sai về thông số kỹ thuật. Phần bạn liên kết để mô tả các thuộc tính Boolean, nhưng không cho biết liệu các thuộc tính dữ liệu tùy chỉnh có thể là thuộc tính Boolean hay không.

— BoltClock

1

Có, đó là cú pháp hợp lệ để bỏ qua giá trị cho thuộc tính dữ liệu tùy chỉnh.

"Các thuộc tính có thể được chỉ định theo bốn cách khác nhau:

Cú pháp thuộc tính rỗng Chỉ là tên thuộc tính. Giá trị ngầm định là chuỗi rỗng. [...] " https://developers.whatwg.org/syntax.html#attributes-0

— eew
nguồn

1

Một mặt, nó vượt qua trình xác thực 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>

Mặt khác, HTML5 không cho biết trong đặc tả của các data-thuộc tính rằng chúng là boolean: https://www.w3.org/TR/html5/dom.html#custom-data-attribute trong khi nó nói rất rõ ràng đối với các boolean khác các thuộc tính như checked https://www.w3.org/TR/html5/forms.html#attr-input-checked

— Ciro Santilli 郝海东冠状病六四事件法轮功
nguồn