如何将API返回的字段值集成到CSS样式的容器中？

我希望将API返回的字段值集成到带有CSS样式的容器中，现有页面的head及body代码如下，请告知具体实现步骤：

现有页面代码 #

Head部分 #

<head>
  <style>
    .container {
      background-color:#fff;
      border-radius:20px;
      padding:100px 60px;
      width:200px;
      box-shadow: rgba(50,50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }   
  </style>
</head>

Body部分 #

<body>
  <div class="container">METEO CHAVENAY</div>
  <div id='temperature'>"temperature"</div> ℃（温度）
  <span id='pressure'>"pressure"</span> hpa（海平面气压）
  <span id='visibility'>"visibility"</span> km（水平能见度）
  <span id='windspeed'>"windspeed"</span> km/h（风速）
  <span id='winddire'>"winddire"</span> °（风向）
  <span id='clouds'>"clouds"</span> %（云量）
  <span id='sunrise'>"sunrise"</span>（日出时间）
  <span id='sunset'>"sunset"</span>（日落时间）
  <span id='timezone'>"timezone"</span> H GMT 时区
</body>

步骤1：修正HTML结构，将数据项纳入容器 #

当前数据元素（温度、气压等）都在.container外，无法继承容器样式，需把所有内容移到容器内部，同时优化排版结构：

<body>
  <div class="container">
    <h2>METEO CHAVENAY</h2>
    <div><span id='temperature'>"temperature"</span> ℃（温度）</div>
    <div><span id='pressure'>"pressure"</span> hpa（海平面气压）</div>
    <div><span id='visibility'>"visibility"</span> km（水平能见度）</div>
    <div><span id='windspeed'>"windspeed"</span> km/h（风速）</div>
    <div><span id='winddire'>"winddire"</span> °（风向）</div>
    <div><span id='clouds'>"clouds"</span> %（云量）</div>
    <div><span id='sunrise'>"sunrise"</span>（日出时间）</div>
    <div><span id='sunset'>"sunset"</span>（日落时间）</div>
    <div><span id='timezone'>"timezone"</span> H GMT 时区</div>
  </div>
</body>

说明：给标题加<h2>标签区分层级，每个数据项用<div>包裹，排版更整齐。

步骤2：编写JavaScript请求API并填充数据 #

在</body>标签前添加JS代码，用于请求API并将返回值插入对应DOM元素：

// 示例API返回格式（请根据实际接口调整）
// {
//   temperature: 22,
//   pressure: 1013,
//   visibility: 10,
//   windspeed: 15,
//   winddire: 90,
//   clouds: 30,
//   sunrise: "06:30",
//   sunset: "18:45",
//   timezone: 2
// }

// 发送API请求
fetch('你的气象API地址')
  .then(response => response.json())
  .then(data => {
    // 将API返回值填充到对应元素
    document.getElementById('temperature').textContent = data.temperature;
    document.getElementById('pressure').textContent = data.pressure;
    document.getElementById('visibility').textContent = data.visibility;
    document.getElementById('windspeed').textContent = data.windspeed;
    document.getElementById('winddire').textContent = data.winddire;
    document.getElementById('clouds').textContent = data.clouds;
    document.getElementById('sunrise').textContent = data.sunrise;
    document.getElementById('sunset').textContent = data.sunset;
    document.getElementById('timezone').textContent = data.timezone;
  })
  .catch(error => {
    console.error('API请求失败:', error);
    // 可选：添加错误提示
    document.querySelector('.container').innerHTML += '<p style="color:red;">数据加载失败，请稍后重试</p>';
  });

说明：替换你的气象API地址为实际接口地址；若API需要密钥或请求头，需在fetch中补充配置参数。

步骤3：优化容器样式（可选） #

如果需要更美观的排版，修改.container的CSS样式：

.container {
  background-color:#fff;
  border-radius:20px;
  padding:40px 30px; /* 缩小内边距避免拥挤 */
  width:300px; /* 加宽容器容纳更多内容 */
  box-shadow: rgba(50,50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  font-family: Arial, sans-serif;
}

.container h2 {
  margin-top: 0;
  text-align: center;
  color: #2c3e50;
}

.container div {
  margin: 8px 0;
  line-height: 1.5;
  color: #34495e;
}

.container span {
  font-weight: bold;
  color: #e74c3c;
}

说明：调整内边距、宽度，给标题和数据项添加样式，提升页面可读性。

步骤4：测试验证 #

1. 将修改后的HTML、CSS、JS代码保存为.html文件
2. 在浏览器中打开文件，检查API请求是否成功、数据是否正确填充
3. 若出现错误，打开浏览器控制台（F12）查看报错信息，排查问题

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