Tôi có thể thêm thuộc tính tùy chỉnh vào thẻ HTML không?

348

Tôi có thể thêm thuộc tính tùy chỉnh vào thẻ HTML như sau không?

<tag myAttri="myVal" />

html custom-attribute

— con yêu
nguồn

3

stackoverflow.com/questions/432174/ cường

— Tamas Czinege

2

và cả stackoverflow.com/questions/209428/

— Mạnh

có thể trùng lặp các thuộc tính Tùy chỉnh - Yea hoặc nay?

— Ciro Santilli 郝海东冠状病事件

Mặc dù các câu trả lời là "có", hãy đảm bảo bạn có một bộ thuộc tính theo chủ đề mà không có khả năng được sử dụng với các trình cắm. ví dụ: "data-myuniqueattribution." Tôi thường chỉ tiền tố bất cứ điều gì sau "dữ liệu-" với một số loại viết tắt hai chữ cái. ví dụ: "data-yscolumntype." Giữ cho nó độc đáo.

189

Bạn có thể sửa đổi khai báo! DOCTYPE (ví dụ DTD) của mình để cho phép nó, để tài liệu [XML] vẫn còn hiệu lực:

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

#IMPLIEDcó nghĩa là nó là một thuộc tính tùy chọn, hoặc bạn có thể sử dụng #REQUIRED, v.v.

Thêm thông tin trong DTD - Thuộc tính .

— bình xăng
nguồn

2

chỉ cần đặt tất cả những thứ đó lên đầu tệp html của bạn (giả sử xhtml 1.0 chuyển tiếp là ok)

— carillonator

8

Có thể tôi đang thiếu một cái gì đó, nhưng nếu bạn làm theo phương pháp này,]> sẽ hiển thị trong trang web được hiển thị. Xảy ra với tôi trên Firefox 3.6. Đoạn mã này từ alistapart.com/articles/customdtd dường như xác minh hành vi này: "Nếu bạn tải xuống các tệp mẫu cho bài viết này và xác thực tệp Internal.html, bạn có thể thấy điều này cho chính mình. Thật không may, khi bạn hiển thị tệp trong trình duyệt ,]> hiển thị trên màn hình. Không có cách nào khắc phục lỗi này, vì vậy phương pháp này là đúng đắn. "

— Mike

3

Một vài điều có thể giúp xuất hiện "]>": Lưu tệp với phần mở rộng tên tệp .xhtml. Bao gồm loại MIME trong tệp với <meta http-equiv="content-type" content="application/xhtml+xml" />.

— LS

4

Khai báo thuộc tính là vô nghĩa đối với hành vi trình duyệt được xem xét. Họ không đọc DTD. Hơn nữa, họ thậm chí không thể bỏ qua tập hợp con bên trong (được sử dụng ở đây), điều này giải thích cho các]. Tuyên bố sẽ chỉ liên quan đến xác nhận chính thức và không nên được sử dụng trên các trang sản xuất.

— Jukka K. Korpela

32

Câu trả lời này chỉ áp dụng cho XHTML và HTML 4.01 trở lên. Nó hoàn toàn bỏ lỡ rằng bây giờ bạn có thể tạo các thuộc tính của riêng bạn nếu bạn đặt tiền tố cho chúng data-.

— brentonstrine

299

Bạn có thể thêm các thuộc tính tùy chỉnh cho các yếu tố của bạn theo ý muốn. Nhưng điều đó sẽ làm cho tài liệu của bạn không hợp lệ.

Trong HTML 5, bạn sẽ có cơ hội sử dụng các thuộc tính dữ liệu tùy chỉnh có tiền tốdata- .

— cây mướp tây
nguồn

169

Hãy nhớ "không hợp lệ" có nghĩa là không có gì. Trang sẽ hiển thị tốt 100% thời gian.

— John Farrell

22

Trên thực tế "không hợp lệ" có ý nghĩa rất thực tế. Ví dụ, nó có thể đặt tài liệu của bạn vào kết xuất quirksmode. Bằng mọi giá, hãy sử dụng loại tài liệu HTML5 và bạn sẽ hợp lệ.

— brentonstrine

Có một bảng tốt gồm các loại tài liệu khác nhau và các chế độ trình duyệt tương ứng ở đây: hsivonen.fi/doctype/#handling . Kiểu tài liệu HTML5 chuyển tất cả các trình duyệt sau năm 2001 sang chế độ Tiêu chuẩn (Đầy đủ). Các loại tài liệu Chuyển tiếp và HTML 4 XHTML (đặc biệt là không có DTD) không :)

— Ilya Streltsyn

christ ngọt ngào, cảm ơn bạn. @jfar đúng nhưng nó giảm khả năng đọc.

— Nevermore

Tài liệu của tôi dù sao cũng không hợp lệ, vì nó cho tôi biết |không được phép trong một css href, nhưng đó là những gì cần thiết cho Google Fonts

— Post Self

73

Không, điều này sẽ phá vỡ xác nhận.

Trong HTML 5, bạn có thể / sẽ có thể thêm các thuộc tính tùy chỉnh. Một cái gì đó như thế này:

<tag data-myAttri="myVal" />

8

nhưng, tôi không quan tâm xác nhận, tôi chỉ muốn nó có thể được truy cập bằng javascript.

— lovespring

10

Nó sẽ làm việc tất nhiên. Nhưng cố tình tạo tài liệu không hợp lệ không phải là một ý tưởng tốt.

31

Tạo tài liệu không hợp lệ là một ý tưởng tuyệt vời. Google tạo ra chúng để giảm thời gian tải, mọi trang web sử dụng canvas sử dụng chúng để tạo trải nghiệm người dùng tốt hơn và sử dụng khung javascript để lấy dữ liệu có ý nghĩa khỏi các phần tử html dễ dàng hơn nhiều bằng cách sử dụng kỹ thuật thuộc tính tùy chỉnh.

— John Farrell

3

@jfar: Canvas không hợp lệ. Nó không có trong HTML 4.01; tuy nhiên, đây là một phần hoàn toàn hợp pháp của đặc tả HTML5 sắp tới.

— bcat

3

Bạn có nghĩa là "không hợp lệ" là gì? Nó không phải là một phần của bất kỳ đặc điểm kỹ thuật được chấp nhận. Làm thế nào một cái gì đó có thể hợp lệ đối với một đặc điểm kỹ thuật không tồn tại?

— John Farrell

34

Hàm jQuery data()cho phép bạn liên kết dữ liệu tùy ý với các phần tử DOM. Đây là một ví dụ .

— Draemon
nguồn

1

Đây là vàng.

— Trevor Wood

1

@TrevorWood và bị hỏng (liên kết).

— Akash Agarwal

23

Trong HTML5: yes: sử dụng thuộc tính data- .

 <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
nguồn

5

Cơ quan tốt hơn: developer.mozilla.org/en-US/docs/Learn/HTML/Howto/iêu

— Zuks

11

Vâng, bạn có thể, bạn đã làm nó trong chính câu hỏi : <html myAttri="myVal"/>.

— luvieere
nguồn

2

Phụ thuộc vào những gì bạn định nghĩa HTML là. Tôi nghĩ về HTML như một ngôn ngữ dựa trên SGML, với một tập hợp các yếu tố và thuộc tính cụ thể. XHTML là một biến thể trên XML, với một tập hợp các yếu tố và thuộc tính cụ thể rất giống với HTML. Khi bạn sử dụng các thuộc tính của riêng mình, đó vẫn là SGML của XML, nhưng theo tôi thì không còn là HTML của XHTML.

— Douwe Maan

Hãy coi nó như một phần mở rộng adhoc, không phải là một tiêu chuẩn theo nghĩa nghiêm ngặt, mà là một dạng thực thi của yêu cầu mà nó không nên phân tích cú pháp nếu nó chứa các thuộc tính tùy chỉnh.

— luvieere

2

DouweM: Tất nhiên, luôn có sự tuần tự hóa HTML của HTML5, không phải là SGML hay XML.

— bcat

2

Và bạn đã phá vỡ (vô hiệu) tài liệu trong quá trình. Không thực hành tốt.

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

Mở rộng đoạn trích

— Jasim Droid
nguồn

2

Vui lòng thêm lời giải thích ngắn gọn cho câu trả lời của bạn.

— Nikolay Mihaylov

10

Có, bạn có thể làm điều đó!

Có HTMLthẻ tiếp theo :

<tag key="value"/>

Chúng ta có thể truy cập các thuộc tính của chúng với JavaScript:

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

Element.setAttribute()đặt thuộc tính trong HTMLthẻ nếu không tồn tại. Vì vậy, bạn không cần phải khai báo nó trong HTMLmã nếu bạn định đặt nó với JavaScript.

key: có thể là bất kỳ tên nào bạn muốn cho thuộc tính, trong khi chưa được sử dụng cho thẻ hiện tại. value: nó luôn luôn là một chuỗi chứa những gì bạn cần.

— IgniteCoders
nguồn

7

Bạn có thể đặt thuộc tính từ JavaScript.

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

— ewg
nguồn

4

Dưới đây là ví dụ:

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

Dưới đây là một ví dụ khác về cách đặt thuộc tính tùy chỉnh thành phần tử thẻ body:

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

Sau đó đọc thuộc tính bằng cách:

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

Bạn có thể kiểm tra mã trên trong Bảng điều khiển trong DevTools, ví dụ:

— ken
nguồn

1

sử dụng dữ liệu-bất kỳ, tôi sử dụng chúng rất nhiều

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

— Erick Boileau
nguồn

Làm thế nào để bạn nhận được data-*các giá trị từ JavaScript?

— Aaron Franke

0

Một cách tiếp cận khác, sạch sẽ và sẽ giữ tài liệu hợp lệ, là nối dữ liệu bạn muốn vào một thẻ khác, ví dụ như id, sau đó sử dụng split để lấy những gì bạn muốn khi bạn muốn.

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

— CAO
nguồn

0

Bạn có thể thêm, nhưng sau đó bạn cũng phải viết một dòng mã JavaScript,

document.createElement('tag');

để đảm bảo mọi thứ rơi đúng vị trí. Ý tôi là Internet Explorer :)

— defau1t
nguồn

3

Điều này sẽ có liên quan nếu tên thẻ không được biết đến với IE. Ở đây, vấn đề là thuộc tính tùy chỉnh, không phải thẻ tùy chỉnh; từ khóa tag ở <tag ...>đây rõ ràng có nghĩa là bất kỳ thẻ HTML nào.

— Jukka K. Korpela

Không phải điều này cũng làm mất hiệu lực XHTML (trừ khi đó là thẻ được công nhận)?

— Paul

0

tốt! bạn thực sự có thể tạo ra một loạt các thuộc tính HTML tùy chỉnh bằng cách ngụy trang các thuộc tính dữ liệu theo những gì bạn thực sự muốn.

ví dụ.

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

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

Nó rõ ràng hoạt động nhưng điều đó sẽ làm mất hiệu lực tài liệu của bạn, không cần sử dụng JScript để bạn có các thuộc tính tùy chỉnh hoặc thậm chí các yếu tố trừ khi bạn phải, bạn chỉ cần xử lý các thuộc tính công thức (tùy chỉnh) mới giống như cách bạn đối xử với thuộc tính "dữ liệu"

Hãy nhớ "không hợp lệ" không có nghĩa gì cả. Tài liệu sẽ tải tốt mọi lúc. và một số trình duyệt thực sự sẽ xác nhận tài liệu của bạn chỉ bằng sự hiện diện của DOCTYPE ....., bạn thực sự biết ý tôi là gì.

— Abdulbasit
nguồn

-8

Bạn có thể làm một cái gì đó như thế này để trích xuất giá trị bạn muốn từ JavaScript thay vì một thuộc tính:

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

— Ếch
nguồn

Các thuộc tính tồn tại vì một lý do; như làm những việc như <input type="hidden" value="...">. Tuy nhiên, hãy xem xét sự khác biệt giữa loại dữ liệu bạn đặt trong các thuộc tính khác nhau trái ngược với dữ liệu bạn có thể đặt trong một trường ẩn. Ẩn một <span>(tất cả mọi thứ) trong một <a>mục đích để duy trì một phần siêu dữ liệu không phải là một động thái tốt. Nó sẽ là đặc thù cho trang web của bạn và phụ thuộc rất nhiều vào JS (sự xuống cấp duyên dáng, con người).

— Jay Edwards