Question

我想在容器div中插入一个特殊元素来存储有关位于容器内部的图像的一些信息。我知道我可以将数据存储在容器div数据属性本身或图像中，但是当我稍后回到项目将它们放入自己的DOM元素时，我发现它更容易和更清晰。数据属性主要用于UI用户操作，例如将缩略图拖入可放置句柄时使用jquery更新元素。

实施例

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

在该示例中，我想替换包含数据attr的div。使用符合ie7到html5的不同标记。

更新：让我改写一下。我喜欢，并将继续使用数据属性。我想单独使用“div”标签。必须有一个比div更好的标签，因为div意味着显示，我没有显示任何东西。只是存储信息。

Answer 1

不要使用元素。元素用于显示信息，而不是存储信息。

您描述的用例正是 data属性的设计目标，因此它们应放在与其相关的img元素上。

Answer 2

您可以在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>

如 spec 中所述：

用户代理不应呈现具有指定隐藏属性的元素。

hidden属性是HTML5的功能，因此对于支持旧浏览器，您还需要此CSS：

*[hidden] {
   display:none;
}

Answer 3

您应该像这样使用它：

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

使用以下方式在JS中获取它：

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

您可以向标记添加任意数量的数据属性。

这也适用于ie6和ie7。

Answer 4

有几种方法可以做到这一点：

使用hidden属性或style="display: none;"
在内部使用一些带有JSON数据的DOM元素，例如： <span style="display: none;">{"id": 1, "name":"John"}</span>

如果您问我，我建议您使用data-属性或<input type="hidden" value="somevalue" />。但最后一个变种（输入）应该存在于形式内部。

我认为另外你可以发明更多的方法来存储数据。但你真的需要重新发明轮子吗？

Answer 5

只需将data- *标签放入img中，麻烦是什么？许多响应式图片插件实际上利用了像

这样的东西

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

我可以使用什么HTML标记来存储父元素数据

5 个答案: