js 变量到 css [剪辑路径 img 库]答案

【问题标题】：js variable to css [clip-path img gallery]js 变量到 css [剪辑路径 img 库]
【发布时间】：2018-06-05 22:32:38
【问题描述】：

每当有人单击按钮时，我都会尝试在每个图像中创建一个随机剪辑路径。

由于某种原因，仅剪切了第一张图像。其他的保持不变。

我在 codepen 中发送代码并剪断。

https://codepen.io/fredericopimpao/pen/ZvBOwN?editors=1111

var test = document.querySelector('.test')
window.setInterval(function(){

  var rand = Math.random()* (200 - 10) + 30;

  test.style.setProperty('--ola', rand+'%');
}, 1000);

.test{
    clip-path: polygon(var(--ola) 30%, 100% 0%, 100% 100%,0% 100%);   
}
img{width:200px;}

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">

【问题讨论】：

标签： javascript css variables gallery clip-path

【解决方案1】：

document.querySelector 将仅返回与选择器匹配的第一个元素，而您应该使用 document.querySelectorAll 并在所有元素上运行循环。

var test = document.querySelectorAll('.test')
window.setInterval(function() {

  var rand = Math.random() * (200 - 10) + 30;
  for (var i = 0; i < test.length; i++)
    test[i].style.setProperty('--ola', rand + '%');
}, 1000);

.test {
  clip-path: polygon(var(--ola) 30%, 100% 0%, 100% 100%, 0% 100%);
}

img {
  width: 200px;
}

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">

如果您希望每个元素有一个不同 clip-path，只需在循环中包含随机数即可：

var test = document.querySelectorAll('.test')
window.setInterval(function() {

  for (var i = 0; i < test.length; i++) {
    var rand = Math.random() * (200 - 10) + 30;
    test[i].style.setProperty('--ola', rand + '%');
  }
}, 1000);

.test {
  clip-path: polygon(var(--ola) 30%, 100% 0%, 100% 100%, 0% 100%);
}

img {
  width: 200px;
}

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">

另一种方法是直接更改 CSS 属性，在这种情况下，您只需为所有元素更改一次：

var clip = document.styleSheets[0].rules[0].style;
window.setInterval(function() {

  var rand = Math.random() * (200 - 10) + 30;
  clip.setProperty('--ola', rand + '%');

}, 1000);

.test {
  clip-path: polygon(var(--ola) 30%, 100% 0%, 100% 100%, 0% 100%);
}

img {
  width: 200px;
}

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">

<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
<img class="test" src="https://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">

【讨论】：

非常感谢您的快速回复和完美的解释。