我可以在css中定义一个元素，然后可以在html中分配文本和图像给它吗?

Question

我有很多HTML页面，在这些页面上，我有很多div元素，里面有div和img和文本。因此，我会在我的HTML页面中多次重复这样的结构:

<div class="container">
<div class="row">
<div class="specific">
<article class="item">
<div class="thumb">
<a href="URL1">
<img src="IMAGE1" alt="ALT1" />
</a>
</div>
<div class="content">
<h2>
<a href="URL2">Text sample 1</a>
</h2>
<div class="author">
<div class="thumb">
<img src="IMAGE2" alt="ALT2" />
</div>
<div class="gold">
<h3>Text sample 2</h3>
<p>Text sample 3</p>
</div>
</div>
</div>
</article>
</div>
</div>
</div>

如果我对每个条目都添加这种结构，我的HTML代码就会变得太长，难以阅读，而且看起来不整洁。

我可以在CSS(或HTML本身)中创建一个元素，这样对于上述结构的每个实例，我可以只放置CSS元素并添加一些属性，如:

• URL1
• IMAGE1
• ALT1
• 文本示例1
• IMAGE2
• ALT2
• 文本示例2
• 文本示例3

，对于另一个例子，我重复这个，这样我的代码看起来更干净，更小。

Answer 1

这就是框架(比如Angular中的*ngFor)的作用，但如果你想在普通的HTML CSS JS中做到这一点，你可以使用javascript创建带有自定义值的元素，并将其添加到你的HTML根元素中，像这样

HTML

<div id="root"></div>

CSS

.bg-red {
background-color: red;
}

JS

const root = document.querySelector("#root");
values = ["hi", "hello", "hey"];
for (let i = 0; i < values.length; i++) {
// create element
const newP = document.createElement("p");
// update element
newP.innerText = values[i];
newP.classList.add('bg-red')
// add element to root div
root.appendChild(newP);
}

您可以在codepen中查看此代码