js变量转换为css [剪切路径img画廊]
[英]js variable to css [clip-path img gallery]
问题描述
I'm trying to make a random clip-path in each image whenever someone clicks a button. 
每当有人单击按钮时，我都试图在每个图像中创建一个随机的剪切路径。
For some reason only the first image is cut. 由于某些原因，仅剪切了第一张图像。 the others remain the same. 其他保持不变。
I send the code in codepen and snipped. 我将代码发送到Codepen中并剪下。
https://codepen.io/fredericopimpao/pen/ZvBOwN?editors=1111 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">
1 个解决方案
解决方案1
0 已采纳 2017-12-23 20:21:59
document.querySelector will return only the first element that match the selector, Instead you should use document.querySelectorAll and run a loop over all the elements. 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">
And if you want a different clip-path for each element, simply include the random inside the loop : 而且，如果您想为每个元素使用不同的 clip-path ，只需在循环内包含random即可：
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">
Another way is to change directly the CSS property and in this case you need to change it only once for all the element : 另一种方法是直接更改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">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.