如何为生成元素添加文本？无需CSS变量实现HTML元素差异化样式

1. 如何为生成的元素添加文本？ #

你可以在生成.grid元素的过程中直接插入文本，或者后期通过JS方法给元素赋值，这里给你两种常用方案：

方案一：生成时直接插入文本（结合names数组） #

如果想把getData里的名字分配给每个grid，可以修改createGrid函数，用模板字符串直接嵌入文本：

function createGrid(x, y) { 
  // 假设这是你getData里完整的names数组
  var names = ["Michał", "Jan", "Katarzyna", "Anna"];
  var nameIndex = 0;
  
  for (var cols = 0; cols < x; cols++) { 
    for (var rows = 0; rows < y; rows++) { 
      // 循环使用names数组里的名字
      var currentName = names[nameIndex % names.length];
      $('#container').append(`<div class='grid'>${currentName}</div>`); 
      nameIndex++;
    }; 
  }; 
  
  $('.grid').width(800 / x); 
  $('.grid').height(800 / x); 
};

方案二：生成后批量添加文本 #

如果已经生成了所有grid元素，也可以通过遍历给每个元素设置文本：

// 调用createGrid生成元素后执行
$('.grid').each(function(index) {
  var names = ["Michał", "Jan", "Katarzyna", "Anna"];
  // 按索引分配名字，超出数组长度则循环
  $(this).text(names[index % names.length]);
});

2. 不用CSS变量实现元素差异化样式，能否在单个div中实现？ #

首先要说明：单个div无法直接容纳多个不同样式的grid（因为你的每个grid都是独立的div元素），但不用CSS变量的话，有几种方法可以让每个.grid呈现不同样式：

方法一：内联样式（JS动态生成） #

在创建每个grid时，直接通过style属性设置差异化样式，比如随机背景色、边框等：

function createGrid(x, y) { 
  for (var cols = 0; cols < x; cols++) { 
    for (var rows = 0; rows < y; rows++) { 
      // 生成随机RGB颜色
      var randomBg = `rgb(${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)})`;
      // 随机边框宽度和样式
      var border = `${Math.floor(Math.random()*5)+1}px ${['solid', 'dashed', 'dotted'][Math.floor(Math.random()*3)]} #333`;
      
      $('#container').append(`<div class='grid' style='background-color: ${randomBg}; border: ${border};'></div>`); 
    }; 
  }; 
  
  $('.grid').width(800 / x); 
  $('.grid').height(800 / x); 
};

方法二：CSS nth-child选择器（适合有规律的样式） #

如果样式有固定规律，可以用CSS的:nth-child选择器给不同位置的grid设置样式：

/* 第一个grid红色背景 */
.grid:nth-child(1) { background-color: #ff4444; }
/* 第二个grid绿色背景 */
.grid:nth-child(2) { background-color: #44ff44; }
/* 奇数位置的grid实线边框，偶数位置虚线边框 */
.grid:nth-child(odd) { border-style: solid; }
.grid:nth-child(even) { border-style: dashed; }

方法三：动态分配预定义CSS类 #

提前在CSS里定义多个样式类，生成grid时随机给每个元素分配一个类：

.style-1 { background: #ffcc00; border: 2px solid #000; }
.style-2 { background: #cc00ff; border: 1px dashed #666; }
.style-3 { background: #00ccff; border: 3px dotted #333; }

function createGrid(x, y) { 
  var styleClasses = ['style-1', 'style-2', 'style-3'];
  
  for (var cols = 0; cols < x; cols++) { 
    for (var rows = 0; rows < y; rows++) { 
      // 随机选一个样式类
      var randomClass = styleClasses[Math.floor(Math.random()*styleClasses.length)];
      $('#container').append(`<div class='grid ${randomClass}'></div>`); 
    }; 
  }; 
  
  $('.grid').width(800 / x); 
  $('.grid').height(800 / x); 
};

内容的提问来源于stack exchange，提问作者mikitheboy