javascript - 在类中存储数据或使用数据属性设置样式。哪个更好？

Question

我有一些元素应该在其中保存一些数据，并应用一些样式。

假设我有一个 4 x 4 的网格，如下所示:

http://jsfiddle.net/tM6ze/1/

我需要存储每个单元格的坐标并通过 javascript 使用它们，但也能够单独设置它们的样式。

我知道我可以像这样在类本身中保存数据:

<div class="cell row-3 col-3"></div>

并在js中解析

我也知道我可以在 css 中设置单元格样式:

.grid .cell[data-row="3"][data-col="3"]{...some style...}

然而，我认为这两种方法都比替代方法(从数据属性和类样式中获取数据)慢。

那么哪个更有效呢？或者哪个在什么情况下最好？

我想我可以在元素中同时包含类和数据(就像在 fiddle 中一样)，但这是最好的方法吗？

Answer 1

我倾向于使用数据，因为 class 有多个值并且必须被解析或匹配。

此外，您使用类的方法等同于 hack。您正在存储数据；为什么不应该使用数据属性？

另外，data- 属性只是一种新的 HTML 属性，即使浏览器不支持 HTML5，您也应该能够操作它们(尽管需要更多工作).

最后，像 jQuery 这样的库(框架，无论什么)都有读取 data- 属性的内置方法，这(如果您将来要使用它们)将极大地简化您的代码。

按照您的方式使用类并没有什么错误；这是没有必要的。数据标签更合适、更清晰、更易于操作。