如何使用JavaScript将数组元素打印到浏览器主窗口并在JS内添加CSS

数组元素打印到浏览器窗口 #

你原有的代码是将内容输出到开发者控制台，要输出到页面主窗口需要操作DOM，常见两种实现方式：

• 简单快速的document.write方式，适合临时测试，会覆盖当前页面已有内容
• 动态创建DOM节点插入的方式，更灵活，不会影响页面原有内容，生产环境推荐

JavaScript内部添加CSS样式的两种常用方式 #

• 直接给单个DOM元素设置style属性，精准控制单个元素样式
• 动态创建<style>标签插入页面头部，批量添加全局样式规则

完整实现代码（基于你提供的数组修改） #

const arr = ["example1" , " example2 " , "example3"]
// 第一步：动态插入全局样式
const style = document.createElement('style')
style.textContent = `
.array-item {
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 4px;
  background-color: #f0f2f5;
  color: #1a73e8;
  font-size: 16px;
}
.array-container {
  width: 80%;
  margin: 20px auto;
}
`
document.head.appendChild(style)

// 第二步：创建内容容器插入页面
const container = document.createElement('div')
container.className = 'array-container'
document.body.appendChild(container)

// 第三步：遍历数组插入元素，可单独设置特殊样式
for (let i = 0; i < arr.length; i++) {
  const item = document.createElement('div')
  item.className = 'array-item'
  item.textContent = arr[i]
  // 示例：单独给第二个元素设置自定义样式
  if(i === 1) {
    item.style.color = '#ea4335'
    item.style.fontWeight = 'bold'
  }
  container.appendChild(item)
  // 可保留原有的控制台输出
  console.log(arr[i])
}

临时测试简化写法 #

如果只是快速测试效果，可以用更短的document.write实现：

const arr = ["example1" , " example2 " , "example3"]
// 直接写入样式到页面
document.write(`<style>.test-item { color: green; font-size: 18px; margin: 10px 0; }</style>`)
for (let i = 0; i < arr.length; i++) {
  document.write(`<div class="test-item">${arr[i]}</div>`)
}

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