css 为什么在循环中添加的列表的位置不具有相同的样式?

ccgok5k5  于 2023-04-22  发布在  其他
关注(0)|答案(2)|浏览(158)

我必须在循环中添加,从数组中取出元素。列表必须显示为一条水平线,所以我在CSS文件中创建了一个类。样式有效,但仅在循环外添加的元素上,而不是内部,这对我来说非常奇怪。页面“index.html”的内容是由JS文件形成的。因此JS中的函数是...

function MainPage(){

    document.querySelector('title').innerText = "Main";
    document.querySelector('header').innerHTML=
        `<h1 style="color:rgb(50, 35, 117);"><p align="center">Music Albums</p></h1>
        <hr>
        <ul class = "menu">
            <li><a onclick="MainPage()">Main</a></li>`;
    countries.forEach(
        (country) =>{
            document.querySelector('header').innerHTML +=
                `<li><a onclick="CategoryPage('${country.id}')">${country.name}</a></li>`;
        }
    );

    document.querySelector('header').innerHTML += `</ul>`;
   
}

我只展示了函数中与问题相关的部分-第节中显示的菜单。

aij0ehis

aij0ehis1#

CSS样式不应用于循环内生成的列表项的原因是因为您将列表项作为字符串连接到header元素的innerHTML属性。当您使用+=运算符连接列表项时,浏览器将被迫重新呈现整个header元素,这将重置CSS类应用的样式。
要解决此问题,您应该为循环中的每个项目创建一个新的<li>元素,并使用appendChild()将其附加到<ul>元素。下面是您的代码的更新版本,应该可以工作:

function MainPage(){
  document.querySelector('title').innerText = "Main";
  const header = document.querySelector('header');
  header.innerHTML =
      `<h1 style="color:rgb(50, 35, 117);"><p align="center">Music Albums</p></h1>
    <hr>
    <ul class="menu">
        <li><a onclick="MainPage()">Main</a></li>
    </ul>`;

  const ul = header.querySelector('ul');
  countries.forEach((country) => {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.innerText = country.name;
      a.setAttribute('onclick', `CategoryPage('${country.id}')`);
      li.appendChild(a);
      ul.appendChild(li);
  });
}

在这段代码中,每个列表项都被创建为一个单独的DOM元素,并使用appendChild()添加到无序列表中,因此应用于<li>元素的CSS类应该可以按预期工作。

kr98yfug

kr98yfug2#

<ul>构建为单个字符串。完成后,将其附加到头文件。

function MainPage(){

    document.querySelector('title').innerText = "Main";
    const header = document.querySelector('header');
    header.innerHTML=
        `<h1 style="color:rgb(50, 35, 117);"><p align="center">Music Albums</p></h1>
        <hr>`;

    let list = `<ul class = "menu">
            <li><a onclick="MainPage()">Main</a></li>`;

    countries.forEach(
        (country) =>{
            list +=
                `<li><a onclick="CategoryPage('${country.id}')">${country.name}</a></li>`;
        }
    );

    list += `</ul>`;

    header.innerHTML += list;
}

相关问题