如何获取包含特定 class 的元素的数据属性?
How to get data attribute of the element that contains a specific class?
我在 Vanilla JavaScript ES5 中制作视差效果。
我想要实现的是设置一个数据属性,并输入我希望视差具有的速度。
这是代码笔:https://codepen.io/Aurelian/pen/vdQMYo?editors=0011
这里是 HTML:
<section class="page-intro">
<div class="page-intro__img js-parallax" data-parallax-speed="-0.5" style="background-image: url(https://metrouk2.files.wordpress.com/2017/03/512366437.jpg?w=748&h=498&crop=1);">
</div>
<div class="page-intro__overlay"></div>
<!-- Two Different Parts, big and small -->
<div class="page-intro__content">
<h1 class="page-intro__title">Puppy</h1>
<span class="page-intro__sub-title">Explore how my design process can help your business grow and succeed.</span>
</div>
<div class="page-intro__content">
</div>
</section>
<section class="page-intro">
<div class="page-intro__img js-parallax" data-parallax-speed="-0.2" style="background-image: url(https://metrouk2.files.wordpress.com/2017/03/512366437.jpg?w=748&h=498&crop=1);">
</div>
<div class="page-intro__overlay"></div>
<!-- Two Different Parts, big and small -->
<div class="page-intro__content">
<h1 class="page-intro__title">Puppy</h1>
<span class="page-intro__sub-title">Explore how my design process can help your business grow and succeed.</span>
</div>
<div class="page-intro__content">
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
这是JS:
window.onload = function() {
var parallax = document.getElementsByClassName('js-parallax');
var xScrollPosition;
var yScrollPosition;
console.log("Data speed is:" + dataSpeed);
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
}
function scrollLoop() {
xScrollPosition = window.scrollX;
yScrollPosition = window.scrollY;
for(var i = 0; i < parallax.length; i++) {
parallaxEl = parallax[i];
var dataSpeed = parallaxEl.getAttribute('data-parallax-speed');
setTranslate(0, yScrollPosition * dataSpeed, parallaxEl);
}
}
window.addEventListener("scroll", scrollLoop, false);
}
问题出在 .getAttribute()
与 data-
属性一起使用时。访问它们的正确方法是通过 HTMLElement 的 dataset
映射。此处的文档:https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
这个有效:https://codepen.io/anon/pen/zRMgyX?editors=0011
window.onload = function() {
var parallax = document.querySelectorAll('.js-parallax');
var xScrollPosition;
var yScrollPosition;
// console.log("Data speed is:" + dataSpeed);
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
}
function scrollLoop() {
xScrollPosition = window.scrollX;
yScrollPosition = window.scrollY;
parallax.forEach(p=>{
var dataSpeed = p.dataset.parallaxSpeed;
setTranslate(0, yScrollPosition * dataSpeed, p);
})
}
window.addEventListener("scroll", scrollLoop, false);
}
我在 Vanilla JavaScript ES5 中制作视差效果。
我想要实现的是设置一个数据属性,并输入我希望视差具有的速度。
这是代码笔:https://codepen.io/Aurelian/pen/vdQMYo?editors=0011
这里是 HTML:
<section class="page-intro">
<div class="page-intro__img js-parallax" data-parallax-speed="-0.5" style="background-image: url(https://metrouk2.files.wordpress.com/2017/03/512366437.jpg?w=748&h=498&crop=1);">
</div>
<div class="page-intro__overlay"></div>
<!-- Two Different Parts, big and small -->
<div class="page-intro__content">
<h1 class="page-intro__title">Puppy</h1>
<span class="page-intro__sub-title">Explore how my design process can help your business grow and succeed.</span>
</div>
<div class="page-intro__content">
</div>
</section>
<section class="page-intro">
<div class="page-intro__img js-parallax" data-parallax-speed="-0.2" style="background-image: url(https://metrouk2.files.wordpress.com/2017/03/512366437.jpg?w=748&h=498&crop=1);">
</div>
<div class="page-intro__overlay"></div>
<!-- Two Different Parts, big and small -->
<div class="page-intro__content">
<h1 class="page-intro__title">Puppy</h1>
<span class="page-intro__sub-title">Explore how my design process can help your business grow and succeed.</span>
</div>
<div class="page-intro__content">
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
这是JS:
window.onload = function() {
var parallax = document.getElementsByClassName('js-parallax');
var xScrollPosition;
var yScrollPosition;
console.log("Data speed is:" + dataSpeed);
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
}
function scrollLoop() {
xScrollPosition = window.scrollX;
yScrollPosition = window.scrollY;
for(var i = 0; i < parallax.length; i++) {
parallaxEl = parallax[i];
var dataSpeed = parallaxEl.getAttribute('data-parallax-speed');
setTranslate(0, yScrollPosition * dataSpeed, parallaxEl);
}
}
window.addEventListener("scroll", scrollLoop, false);
}
问题出在 .getAttribute()
与 data-
属性一起使用时。访问它们的正确方法是通过 HTMLElement 的 dataset
映射。此处的文档:https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
这个有效:https://codepen.io/anon/pen/zRMgyX?editors=0011
window.onload = function() {
var parallax = document.querySelectorAll('.js-parallax');
var xScrollPosition;
var yScrollPosition;
// console.log("Data speed is:" + dataSpeed);
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
}
function scrollLoop() {
xScrollPosition = window.scrollX;
yScrollPosition = window.scrollY;
parallax.forEach(p=>{
var dataSpeed = p.dataset.parallaxSpeed;
setTranslate(0, yScrollPosition * dataSpeed, p);
})
}
window.addEventListener("scroll", scrollLoop, false);
}