如何在Fetch数据时用JS修改CSS，并按屏幕尺寸调整数据展示量？

一、核心问题修正与需求实现思路 #

1. Fetch数据时修改CSS的正确方式 #

你代码里尝试通过classList.add添加movie:nth-child(odd)是错误的——classList只能添加类名，不能直接加CSS伪类选择器。如果要给奇数项添加样式，要么直接用CSS的:nth-child(odd)，要么通过JS遍历元素单独加类。修改CSS的时机建议放在Fetch请求成功后，确保DOM元素已存在再操作。

2. 屏幕尺寸越小展示数据越少的实现 #

需要根据当前屏幕尺寸过滤数据源，同时监听窗口大小变化，动态调整展示的数据量。可以通过window.matchMedia定义多档屏幕阈值，对应不同的数据展示条数，窗口变化时重新渲染或调整元素显示状态。

二、修正后的完整代码 #

const category = async () => {
  try {
    const categoryContainer = document.querySelector(".category");
    const moviesContainer = document.querySelector(".movies");
    // 定义不同屏幕尺寸对应的数据展示数量
    const screenConfig = [
      { media: '(max-width: 576px)', count: 2 },
      { media: '(max-width: 768px)', count: 4 },
      { media: '(min-width: 992px)', count: Infinity } // 大屏展示全部
    ];

    // 获取当前屏幕对应的展示数量
    const getDisplayCount = () => {
      for (const config of screenConfig) {
        if (window.matchMedia(config.media).matches) {
          return config.count;
        }
      }
      return Infinity;
    };

    // 渲染数据的函数
    const renderMovies = (data) => {
      const displayCount = getDisplayCount();
      // 过滤数据，只保留需要展示的条数
      const filteredMovies = data.slice(0, displayCount);
      const movieElements = filteredMovies.map((elem) => `
        <div class="picture">
          <div class="overlay"></div>
          <img src="${elem.image}" alt="${elem.alt}">
        </div>
      `);
      // 清空容器后重新渲染（避免重复添加）
      moviesContainer.innerHTML = movieElements.join("");
      
      // Fetch成功后修改CSS：给奇数项添加自定义类
      const pictureItems = moviesContainer.querySelectorAll(".picture");
      pictureItems.forEach((item, index) => {
        if (index % 2 === 0) { // JS索引从0开始，奇数项对应index为0、2...
          item.classList.add("odd-item");
        }
      });
    };

    // 监听窗口大小变化，重新渲染
    window.addEventListener('resize', () => {
      // 若数据不变，可把数据存在全局变量避免重复请求
      fetch("http://localhost:3000/movies")
        .then(res => res.json())
        .then(data => renderMovies(data))
        .catch(err => console.log(err.message));
    });

    // 初始加载数据
    const data = await fetch("http://localhost:3000/movies");
    const res = await data.json();
    renderMovies(res);

    // 给容器添加类（修改CSS的另一种方式）
    categoryContainer.classList.add("movie-loaded");
  } catch (error) {
    console.log(error.message);
  }
};

// 调用函数
category();

三、代码细节说明 #

• CSS修改部分：

  1. 初始加载完成后给.category添加movie-loaded类，可在CSS中定义对应样式，比如.movie-loaded { background: #f5f5f5; }
  2. 遍历渲染后的.picture元素，给奇数项添加odd-item类，配合CSS样式.odd-item { border: 1px solid #ddd; }实现差异化样式

• 响应式数据展示：

  1. 通过screenConfig定义不同屏幕尺寸对应的数据条数，小屏只展示前2/4条，大屏展示全部
  2. 监听resize事件，窗口变化时重新请求数据并渲染（数据不变时可复用已获取数据，减少请求）
  3. 使用slice(0, displayCount)截取需要展示的数据，确保小屏只渲染部分内容

四、补充CSS示例（配合JS修改） #

/* 初始状态样式 */
.category {
  padding: 1rem;
  transition: all 0.3s;
}

/* 数据加载后的样式 */
.category.movie-loaded {
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 奇数项样式 */
.picture.odd-item {
  transform: translateY(5px);
}

/* 小屏下的容器样式优化 */
@media (max-width: 576px) {
  .movies {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

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