Thuộc tính có thể xác định người dùng trên các thành phần HTML?

Những gì tôi cần làm là có thể lưu trữ một số phần dữ liệu về một phần tử.Thuộc tính có thể xác định người dùng trên các thành phần HTML?

Ví dụ, cho phép nói rằng tôi có một mục danh sách < li>, và tôi muốn để lưu trữ một số dữ liệu về nó trong phần tử, như "Đây là yếu tố 1 từ XYZ".

Cách duy nhất tôi biết làm thế nào để làm điều này (mà tôi không muốn làm gì nếu tôi có thể tránh) là thế này:

<li id='item1'> 
    Item 1 
    <!--This is element 1 from XYZ--> 
</li> 

<script> 
    // read it something like this 
    var e = document.getElementById('item1').innerHTML; 
    // then parse out the comment, etc. 
    // -- 
</script>

Những gì tôi thực sự muốn một cái gì đó như thế này (mà tôi là khá chắc chắn là không thể):

// example 
<li id='item1' userdata='This is element 1 from XYZ'>Item 1</li>

.. tất nhiên, tôi muốn có thể truy cập nó bằng cách nào đó qua javasscript.

Ngoài ra, có cách nào khác để đạt được điều này không?

Cảm ơn -

Nguồn

2010-01-08 OneNerd

Bạn có thể truy cập thuộc tính userdata = "" từ JavaScript. Chỉ cần làm:

var theData = document.getElementById('item1').getAttribute('userdata');

Nếu bạn muốn làm điều đó một cách HTML5, sau đó bạn sẽ sử dụng thuộc tính tên là đĩa dữ liệu *, ví dụ:

<li id='item1' data-foo='This is element 1 from XYZ'>Item 1</li>

cách mà nó vẫn sẽ có hiệu lực (ví dụ, nó sẽ làm cho bạn cảm thấy tốt hơn khi không sử dụng thuộc tính không hợp lệ). trình duyệt mới sẽ hỗ trợ truy cập vào các thuộc tính * đĩa dữ liệu như vậy:

var theData = document.getElementById('item1').data.foo;

nhưng tôi không nghĩ rằng đó là thực hiện đủ rộng rãi để dựa vào được nêu ra.

Nếu bạn muốn lưu trữ dữ liệu trong một chú thích (mặc dù tôi muốn khuyên đi các tuyến đường thuộc tính thay vì), bạn có thể làm điều gì đó như:

var e = document.getElementById('item1'); 
var n = e.firstChild; 
while (n && n.nodeType != Node.COMMENT_NODE) { 
    n = n.nextSibling; 
} 
// now n.nodeValue will have the comment contents

(Không có bảo đảm về việc IE thích bất kỳ ở trên.)

Nguồn

2010-01-08 01:44:25 heycam

+1 Để đề cập đến * thuộc tính dữ liệu HTML5 hợp lệ *. Câu trả lời chính xác! –

+1 quá cho HTML5 – Anurag

Wow - câu trả lời tuyệt vời, cộng với đề cập HTML5 là rất hữu ích. Cảm ơn rất nhiều! – OneNerd

Bạn không thể thêm các phần tử tùy ý vào HTML. Vâng, bạn có thể nhưng nó sẽ không hợp lệ và beheaviour là không xác định. Đối với loại điều này tôi có xu hướng sử dụng jQuery. Nó có một cuộc gọi data() có thể thêm dữ liệu tùy ý vào một phần tử. Tôi tin rằng nó mã hóa nó trong thuộc tính lớp nhưng việc thực hiện không quan trọng.

Bạn có thể tự làm điều này nhưng tại sao lại bận tâm? Thật dễ dàng để có được sai bằng cách đặt các ký tự sai trong, không chính xác thoát/unescaping dữ liệu hoặc vô tình phá hủy informatino. Thay vào đó, chỉ cần thực hiện:

$("#item1").data({source: "Thsi is element 1 from XYZ"});

Nguồn

2010-01-08 01:43:03 cletus

Nếu bạn không cần HTML hợp lệ, bạn có thể tạo bất kỳ thuộc tính nào bạn muốn và bạn có thể truy cập nó bằng Javascript bằng cách gọi phương thức getAttribute.

Nguồn

2010-01-08 01:44:37 SLaks

Bạn có thể thêm phần tử ẩn được lồng vào có id và dữ liệu của bạn dưới dạng innerText. Sử dụng thuộc tính kiểu để đảm bảo nó không hiển thị.

Nhưng tất cả đều phụ thuộc vào những gì bạn đang cố gắng đạt được. Bạn có thể xây dựng thêm?

Nguồn

2010-01-08 01:47:51

Vì bạn có thể chấp nhận thêm ý kiến, một giải pháp tốt hơn sẽ có thêm một phần tử span với nội dung mà bạn muốn ..

<span class="data">.....</span>

bạn xác định lớp dữ liệu của bạn để có display:none và nó là vô hình ...

cách này bạn có thể có quyền truy cập vào nó với DOM bình thường đi qua các phương pháp ..

Nguồn

2010-01-08 01:59:08

bạn có thể sử dụng setUserData() và getUserData() chức năng http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-setUserData

Ví dụ:

<html> 
<head> 
    <script type="text/javascript"> 
     function set(){ 
      var a = document.getElementById("testElement"); 
      a.setUserData("testData", "Some text", null); 
     } 

     function get(){ 
      var a = document.getElementById("testElement"); 
      alert(a.getUserData("testData")); 
     } 
    </script> 
</head> 
<body> 
    <span id="testElement"/> 
    <form> 
     <input type="button" value="setUserData" onclick="set()"/> 
     <input type="button" value="getUserData" onclick="get()"/> 
    </form> 
</body>

Nguồn

2010-01-08 02:27:14

// Nếu bạn muốn bao gồm dữ liệu trong html tại sao không cho nó nút riêng của mình?

.hiddendata{ 
display: none 
} 

<li id= 'item1'> 
Item 1 
<span class= "hiddendata"> This is element 1 from XYZ</span> 
</li> 

function readHiddenData(who){ 
var A= [], n= who.firstChild; 
while(n){ 
    if(n.className= 'hiddendata'){ 
    A[A.length]= n.textContent || n.innerText || ''; 
    } 
    n= n.nextSibling; 
} 
return A; 
} 

function showHiddenData(who){ 
var n= who.firstChild; 
while(n){ 
    if(n.className= 'hiddendata'){ 
    n.style.display= "inline" 
    } 
    n= n.nextSibling; 
} 
}

Nguồn

2010-01-08 04:09:37 kennebec

Thuộc tính có thể xác định người dùng trên các thành phần HTML?

Trả lời

Các vấn đề liên quan