javascript - 从文件夹中的文件生成 <img> 并将 css 样式应用于 img 或容器(基于文件名) – (Javascript/JQuery/PHP？)

Question

是否可以根据 <img> src 的文件名，使用 javascript 或 JQuery 将 CSS 类应用于 <div> 或其容器 <img>？

当文件名中存在 A 时，您能否将(已存在的)CSS 类分配给 <img src="...-A.jpg"> 或其父 <div>？

添加到此想法
是否不仅可以像这样自动应用样式，还可以创建整个 <img> 标签？理想情况下，我会有不同的“元素”页面，在这些页面上我将图像文件夹(即 images/project-1)链接到 <div id="image-container"> 。

您可以使用 Javascript 在父容器 <div><img/></div> 中创建后续的 <div> 结构吗？或者这必须是某种 PHP 输入？

假设你有；

.class-for-A {
   width:200px;
}
.class-for-B {
   width:400px;
}
.class-for-C {
   width:600px;
}

<div id="image-container">    
<!--(this section to be created automatically, and apply styles subsequently based on file name end)-->
   <div>
      <img src="img-filename-123-B.jpg"/>
   </div>
   <div>
      <img src="img-filename-456-B.jpg"/>
   </div>
   <div>
      <img src="img-filename-789-C.jpg"/>
   </div>
   <div>
      <img src="img-filename-789-A.jpg"/>
   </div>

A、B、C 仅用于指示类样式，而不是序列。每个 img 或 div 都可以通过这种方式自动设置样式，充当一种轻型内容管理系统(因此可能只有三种 css 类样式(A、B、C)，但它们会在不同的多个图像/div)。

这只是我的一个想法，我很好奇是否有人对此有任何想法。

Answer 1

如果您想通过 src 属性获取元素，可以尝试 document.querySelector 或 document.querySelectorAll。

document.querySelectorAll('img[src='your_filename']');