如何使用JavaScript更改CSS样式？

Question

我希望在页面上通过JavaScript动态创建的“电影标题”和“电影年份”能够应用我在CSS文件中设置的样式。目前，这些由JavaScript生成的元素仅以普通的黑色文本显示。

这些类的样式应当表现为更大的白色文本，并使用Google字体。

我遗漏了什么？

请查看以下HTML、CSS和原生JS代码：

CSS:

/* ... 其他CSS规则 ... */

.movie-title {
  color: white;
  font-size: 1.4rem;
  margin: 10px 0 0 0;
  text-transform: uppercase;
}

.movie-year {
  color: white;
  font-size: 1rem;
  margin: 10px 0 0 0;
  text-transform: uppercase;
}

/* ... 其余CSS定义 ... */

JS:

const movieSearchBox = document.getElementById("movie-search-box");

function findMovies() {
  const searchTerm = movieSearchBox.value;
  const resultsGrid = document.getElementById("result-grid");

  if (searchTerm.length > 2) {
    fetch(`http://www.omdbapi.com/?s=${searchTerm}*&apikey=dd3f37db`)
      .then(response => response.json())
      .then(movieResults => {
        movieResults.Search.forEach(movie => {
          const movieCard = document.createElement("div");
          movieCard.classList.add("movie-card");
          resultsGrid.appendChild(movieCard);

          const movieTitle = document.createElement("h3");
          movieTitle.classList.add("movie-title");
          // 这里应该是appendChild而不是append
          movieTitle.textContent = movie.Title; 
          movieCard.appendChild(movieTitle);

          const movieYear = document.createElement("h4");
          movieYear.classList.add("movie-year");
          movieYear.textContent = ` (${movie.Year})`; 
          movieCard.appendChild(movieYear);

          console.log(movie.Title);
        });
      })
      .catch(error => console.log(error));
  }
}

示意图

Salman A · Answer

这边您提到的错误已经得到了纠正，修正后的代码如下：

const movieCard = document.createElement("div");
movieCard.classList.add("movie-card");
resultsGrid.appendChild(movieCard);

const movieTitle = document.createElement("h3");
movieTitle.classList.add("movie-title");
movieTitle.textContent = movie.Title; // 设置电影标题文本
movieCard.appendChild(movieTitle); // 将电影标题添加到电影卡片中

const movieYear = document.createElement("h4");
movieYear.classList.add("movie-year");
movieYear.textContent = movie.Year; // 设置电影年份文本
movieCard.appendChild(movieYear); // 将电影年份添加到电影卡片中

console.log(movie.Title); // 控制台输出电影标题

此修正假设movie.Title和movie.Year均已正确定义。

Barry Wark · Answer

这里我做了一些修改以避免可能出现的错误：

const movieCard = document.createElement("div");
movieCard.classList.add("movie-card");
resultsGrid.appendChild(movieCard);

// 创建一个辅助函数来生成带有文本和类名的DOM元素
const createElement = (tag, text, className) => {
    const element = document.createElement(tag);
    element.classList.add(className);
    element.textContent = text;
    return element;
};

// 使用辅助函数创建并添加电影标题和年份元素
movieCard.appendChild(
    createElement("h3", movie.Title, "movie-title"),
    createElement("h4", `(${movie.Year})`, "movie-year")
);

console.log(movie.Title);

这样的修改应该能解决你的问题。