将 data-0 属性添加到 div答案

【问题标题】：Adding data-0 attribute to div将 data-0 属性添加到 div
【发布时间】：2015-02-12 10:37:42
【问题描述】：

我想添加这个..

data-0="background-position:0px 0px;" data-500="background-position:0px -250px;"

.. 到一个名为“section-1”的 div。这是我在文档就绪函数中调用的代码，但它似乎不起作用：

if($(window).width() > 767){
  $('#section-1').attr('0', 'background-position:0px 0px;');
  $('#section-1').attr('500', 'background-position:0px -250px;');
}

我的 CSS 看起来像这样

#section-1{
  background-image:url(test.jpg); width:100%; height:500px;
}
@media only screen and (min-width: 767px){
  #section-1{
    background-image:url(test.jpg); background-size:100%; height:500px;
  }
}

这是为了一些视差，以防有人想知道。

【问题讨论】：

请注意，您应该使用 window.matchMedia 而不是 window.width() 来完全适应 CSS 媒体查询：developer.mozilla.org/en/docs/Web/API/Window.matchMedia

标签： jquery html css parallax

【解决方案1】：

您的属性称为data-0，因此请给出完整的属性名称

$('#section-1').attr('data-0', 'background-position:0px 0px;');

【讨论】：

我看到它有效，但只有当我使用 Firebug 时，而不是当我尝试查看源时，它没有视差？知道为什么会这样吗？
@Sultenhest：使用像 Chrome F12 DOM 检查器这样的工具，因为查看源代码倾向于显示原始服务器 HTML 文件之前在页面上运行任何代码:)跨度>

【解决方案2】：

当您使用.attr 函数时，您也必须添加“数据”前缀。

如果您要使用 .data 函数，您可以照常编写它

所以：

$('#section-1').attr('data-0', 'background-position:0px 0px;');

或

$('#section-1').data('0', 'background-position:0px 0px;');

问候提摩太

【讨论】：

您的第二个选项不正确。它不会将数据存储为属性（仅从属性中读取）。数据将在后台将其存储在浏览器查找字典中。
它似乎对我和其他人有用？ stackoverflow.com/q/7163234/2645202
您引用了不相关的答案。 data() 不会更改 HTML 中的属性 data- 值。
您应该在“感谢此信息”处停下来：P 只需删除不正确的第二个选项并删除对.data() 的所有引用，使其成为正确答案。认为自己很幸运能从无知的群众中获得 2 票。