如何使用 javaScript 添加新的数据属性（使用 skrollr.js）

【问题标题】：How to add new data attribute with javaScript ( using skrollr.js)如何使用 javaScript 添加新的数据属性（使用 skrollr.js）
【发布时间】：2014-05-25 04:47:22
【问题描述】：

在 HTML 中我有一张图片

<img id="d1" src="http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" >

我想给它添加一个属性：

data--1000-top="opacity: 0; transform: scale(0.5); bottom: 71px;"

它必须实际写在代码中才能让 skrollr.js 能够使用它

我添加了一个应用此功能的按钮

function myFnc(){
var s = document.getElementById("d1");
s.setAttribute("data-top","transform: scale(1);");
s.setAttribute("data--800-top","transform: scale(0.5);");
}

【问题讨论】：

标签： javascript scroll custom-data-attribute

【解决方案1】：

通过 setAttribute() https://developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute

小例子

 var el = document.getElementById("id");
 el.setAttribute("attribute-name","attribute-value");

这里有一个小提琴http://jsfiddle.net/9E2t2/2/

【讨论】：

感谢您的快速答复。我正在尝试使用 skrollr.js，我尝试了你所说的但它不起作用。
我添加了一个简单的小提琴。如果您想要更好的答案，您需要向我们提供更多详细信息，例如您的代码示例。
我把你的代码放在小提琴jsfiddle.net/9E2t2/5 中并且可以工作。也许问题出在 skrollr init
阅读此处github.com/Prinzhorn/skrollr/issues/35 每次更改数据属性时尝试使用此 refresh() 方法。我现在没有其他解决方案