可以使用什麼HTML標籤來存儲父元素數據

我想插入一個特殊的元素在容器div內，以存儲位於容器內的圖像的一些信息。我知道我可以將數據存儲在容器div數據屬性本身或圖像中，但是當稍後返回到將它們放入它們自己的DOM元素中的項目時，我發現它更容易和更清晰。數據屬性主要用於UI用戶操作，例如當縮略圖被拖入可拖放句柄時使用jquery更新元素。可以使用什麼HTML標籤來存儲父元素數據

實施例：

在那個例子中我想替換包含數據ATTR在div。使用符合ie7到html5的不同標籤。

更新：讓我重新修改一下。我喜歡，並將繼續使用數據屬性。我只想替換我的「div」標籤。必須有比div更好的標籤，因爲div是爲了顯示而我沒有顯示任何東西。只需存儲信息。

來源

2013-01-31 Tim Joyce

只需將它放入'img'標籤。這是唯一合乎邏輯的方法。 –

data- *屬性有什麼問題？ –

由於措辭中出現了一些混淆，我更新了我的問題。 –

您可以在div標籤使用hidden屬性：

<div class="container"> 
    <img class="thumbnail" src="/path/to/thumbnail" /> 
    <div data-imagefull="path/to/fullsize/image" data-imageid="179" hidden></div> 
</div>

如規範說：

用戶代理不應呈現有指定的隱藏屬性的元素。

hidden屬性是HTML5的功能，因此支持舊的瀏覽器，你需要這個CSS也：

*[hidden] { 
    display:none; 
}

來源

2013-01-31 12:36:48 Engineer

將'name'更改爲'class'，並且通過它可以更容易地訪問jQuery ... – nnnnnn

有趣的發現...尤其是這部分在W3C文檔「雖然隱藏描述意味着它們沒有單獨使用，它們可以寫在這樣一種方式，他們在被引用的特定上下文中有用他們描述的圖像。「 –

請勿爲此使用元素。元素用於顯示信息，而不是存儲它。

您所描述的使用情況是正是什麼data屬性設計，因此它們應該放在它們與img元素。

來源

2013-01-31 12:32:52

我的問題措辭有些混亂。我更新了它，使自己更清晰。 –

@TimJoyce即使進行更新，DOM中的元素僅用於存儲信息也是不正確的。關於隱藏的「輸入」元素的答案適用於您，但此方法在語義上設計用於通過POST/GET提交的表單中。 –

，但它是使用PHP循環創建縮略圖時最簡單的方法。我還應該如何存儲與特定縮略圖有關的信息？ –

你應該使用這樣的：

<img id="geoff" data-geoff="geoff de geoff" src="image.jpg" />

得到它JS使用：

var geoff = document.getElementById("geoff"); 
alert(geoff.getAttribute("data-geoff"));

Y您可以爲標籤添加任意數量的數據屬性。

而且這也適用於ie6和ie7。

來源

2013-01-31 12:40:47

有幾種方法可以做到這一點：

使用的每一塊數據的自己的DOM元素（任何你喜歡）與hidden屬性或style="display: none;"
使用與JSON數據裏面的一些DOM元素，例如<span style="display: none;">{"id": 1, "name":"John"}</span>

如果你問我，我會建議使用data-屬性或<input type="hidden" value="somevalue" />。但最後一個變體（輸入）應該存在於表單中。

我想你還可以發明更多的方法來存儲數據。但是你真的需要重塑輪子嗎？

來源

2013-01-31 13:11:46 Valerii

只是把裏面IMG數據 - *標記，有什麼麻煩？很多響應式圖片插件infact利用像

<img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />

來源

2013-01-31 13:55:50

可以使用什麼HTML標籤來存儲父元素數據

回答

相關問題