如何更改JavaScript元素上的CSS样式？

qqrboqgw 于 5个月前发布在 Java

关注(0)|答案(2)|浏览(64)

我想让电影标题和电影年份以我在CSS文件中设置的样式显示。目前，JavaScript创建的元素只显示纯黑色文本。
这些类的样式应该显示为带有google字体的更大的白色文本。
我错过了什么？
请参阅HTML、CSS和vanilla JS的代码。
超文本标记语言：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
      integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato&display=swap"
      rel="stylesheet"
    />
    <link href="https://fonts.cdnfonts.com/css/fxno-w" rel="stylesheet" />

    <link rel="stylesheet" href="style.css" />
    <title>Movie App</title>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>FIND YOUR <span class="gradient-text">FAVORITE</span> MOVIE.</h1>
      </header>

      <input type="text" id="movie-search-box" onkeyup="findMovies()" />

      <i class="fa-solid fa-magnifying-glass fa-lg" aria-hidden="true"></i>

      <div class="result-grid" id="result-grid">
        <!-- <div class="movie-card" id="movie-card">
          <img class="movie-cover" />
          <h3 class="movie-title">Aquaman</h3>
          <h4 class="movie-year">(1994)</h4>
        </div> -->
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

字符串
CSS：

body {
   background: #333333; 
   font-family: 'Lato', sans-serif;                                
}

.container {
    width: 90%;
    max-width: 1200px;
    text-align: center;
    margin: auto;
    margin-top: 50px;
}

/* Main header section */

h1 {
    color: white;
    font-size: 2.8rem;
    font-family: 'fx logo'
}

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

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

/* Changes "Favorite" text to a gradient */

.gradient-text {
    background-image: linear-gradient(45deg, #d41044, #f89f03);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

/* Input box section */

input {
    width: 50%;
    height: 30px;
    background-color: #222222;
    border: 1px solid rgba(255, 255, 255, 0.562);
    border-radius: 5px;
    padding-left: 15px;
}

input:focus {
    outline: none;
}

input[type=text]{
    color: rgba(255, 255, 255, 0.616);
}

.fa-magnifying-glass {
    color: white;
    margin-left: 10px;
}

.searchBtn {
    width: 35px;
    height: 35px;
    background: #333333;
    border: none;
    border-radius: 5px;
}

.searchBtn:hover {
    background: rgba(0, 0, 0, 0.116);
    cursor: pointer; 
}

/* Movie Results Grid Section */

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

}

.movie-card {
    margin-top: 60px;
}

.movie-cover {
    width: 200px;
}

/* js related classes */
/* .hide-result-grid {
    display: none;
} */

型
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.append(movieCard);

          const movieTitle = document.createElement("h3");
          movieTitle.classList.add("movie-title");
          movieCard.append(movie.Title);

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

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

型

的数据

css

来源：https://stackoverflow.com/questions/77776621/how-can-i-change-css-styles-on-javascript-elements

2条答案

按热度按时间

jdzmm42g1#

在这里，你完全错了。我做了更正：

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

const movieTitle = document.createElement("h3");
movieTitle.classList.add("movie-title");
movieTitle.textContent = movie.Title;
movieCard.append(movieTitle);

const movieYear = document.createElement("h4");
movieYear.classList.add("movie-year");
movieYear.textContent = movie.Year;
movieCard.append(movieYear);

console.log(movie.Title);

字符串
假设movie.Title和movie.Year是明确定义的。

赞(0）回复(0）举报 5个月前

mo49yndu2#

在这里，你会得到错误，所以我做了一些修改，以防止这些。

const movieCard = document.createElement("div");
    movieCard.classList.add("movie-card");
    resultsGrid.append(movieCard);
    const createElement = (tag, text, className) => {
    const element = document.createElement(tag);
    element.classList.add(className);
    element.textContent = text;
    return element;`enter code here`
    };
    movieCard.append(
    createElement("h3", movie.Title, "movie-title"),
    createElement("h4", `(${movie.Year})`, "movie-year")
);
console.log(movie.Title);

字符串
这将解决你的问题。

赞(0）回复(0）举报 5个月前

我来回答

如何更改JavaScript元素上的CSS样式？

2条答案

相关问题

热门标签

最新问答