循环浏览web字体文件中的图像

Loop over images in web font file

本文关键字：图像 文件 字体 浏览 web 循环      更新时间：2023-09-26

我使用一组svg图标创建了一个web字体文件。还使用此生成了关联的CSS文件https://icomoon.io/应用程序。

现在我可以使用css类名将单独的图像添加到网页中，就像在Fontwo敬畏中一样。但是，在所有这些图像上循环并使用javascript显示所有图像的正确方法是什么？我们是否需要创建一个包含所有类名的json数组，然后循环？

提前谢谢。

您可以选择DOM元素（div、img等）并使用JavaScript进行循环。您可以简单地在每个DOM元素上关联一个类名（它将用作过滤器），并在循环中选择每个DOM元素（下面的快速示例）。

或者，您可以有一个JSON，在那里定义您的DOM元素。再次，您需要在JSON数组中循环，选择DOM元素并对每个元素应用您的操作。在我看来，JSON的这种最新方法非常适合您的用例，对document.querySelectorAll（）的结果进行简单的循环将完成任务。

http://jsfiddle.net/ppgrayry/2/

<div class="icon">icon</div>
<div class="icon">icon</div>
<div class="icon">icon</div>
<div class="icon">icon</div>
<div class="icon">icon</div>
<div class="icon">icon</div>

var elms = document.querySelectorAll('.icon');
for(var i = 0; i < elms.length; i++) {
    elms[i].classList.add('icon-active');
}

.icon {
    width: 50px;
    height: 50px;
    background-color: yellow;   
}
.icon-active {
        background-color: red !important;
}
相关文章：