Question

我应该制造9张卡片。使用for循环创建t。当它说是数字1时，应该增加它在循环中的数字。将循环编号添加到数据属性。为卡创建CSS类，以为其提供上面图像的样式。每个奇数卡的背景颜色应为＃52ce90。文本的颜色应更改为白色。

我已经尝试过，但是我不知道该怎么做。

这是我的代码：

var div = document.createElement("div");
var newCard = "test";
var i;
for (let i = 1; i <= 9; i++) {
  newCard += "Box number" + i "<br>";
}

<div class="container" id="Container">
  <div class="card" id="card">
    <div class="card--header">
      <h1 class="card--number--text">
        Card number
      </h1>

      </div>
      <div class="card--by">
        By 
      </div>
      <div class="card--time">
       43 minutes ago
      </div>
      <button class="card--button"> View on site</button>

以及如何在CSS中进行样式设置，我应该使用什么类或ID以及如何设置框？

Answer 1

我创建了一个符合您要求的代码段。在这里查看：

var container = document.getElementById("container");
for( var i=1;i <=9; i++)
{
	var el = document.createElement("div");
  el.className ="card";
  el.id = "card" + i;
  el.innerHTML = "ok";
  container.append(el);
}

.card:nth-child(odd) {
  background: #52ce90;
  color: #fff;
}

<div id="container">

</div>

Answer 2

在这里，您有将卡奇数类附加到奇数值的代码。知道您可以根据需要设置样式

abs(olute)

这里有个小提琴： https://jsfiddle.net/06Lnghvw/

此外，您还可以使用纯CSS简单地设置奇数和偶数卡的样式。请阅读：https://www.w3schools.com/cssref/sel_nth-child.asp

用javascript和html制作卡片

2 个答案: