javascript - 如何定位 html 5 属性 "data-src"并用 jQuery 替换为 "src"？

Question

我试图通过使用新的 html 5“data-”属性来存储并在需要时删除它来找到动态加载文件和其他元素的“最佳”方法。

我的问题:

如何定位“data-”属性并将其删除从而留下剩余的属性名称？

例如，这个:

<!-- Custom CSS -->
<link rel="stylesheet" class="custom" data-href="css/mobile.css">

会变成这样:

<!-- Custom CSS -->
<link rel="stylesheet" class="custom" href="css/mobile.css">

编辑: 这整个实验是针对响应式设计(用户界面/性能)的，我需要能够根据设备分辨率加载 css 文件/元素。这将为较小的设备带来更高的性能，以防止不必要的数据加载。我正在使用 enquire.js plugin (神奇的顺便说一句)，它允许您在针对媒体查询时触发函数。因此，为了保持最新状态，我想使用“data-”属性根据设备分辨率从 DOM 添加/删除元素。

Christian Heilmann 的本教程就是这样做的: http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

我正在尝试将他的技术与 enquire.js 相结合

Answer 1

假设您知道如何访问您的元素，只需一行代码即可启用:

$(element).attr("href", $(element).data("href"));

因为 data-href 什么都不做，所以你不需要删除它。只需将其镜像为真实的 href 属性即可。要使 href 属性再次失效:

$(element).attr("href", false);

或完全删除它:

$(element).removeAttr("href");

对于 <img>，它是相同的技巧，但使用字符串 "src" 而不是 "href"