Question

我正在尝试创建一个脚本，将我的页眉和页脚插入所有页面，但是插入的html不使用链接的样式表。当我尝试对所拥有的图像提出特定的样式请求时，我发现了这一点。

我在Google各处看过，但没有任何效果。我尝试注入样式，但是没有做任何事情（这使页脚消失了。）

function footer(isHome) {
  let footer = document.getElementsByTagName("footer")[0];
  let html = `<p>JoJo Studios 2019</p>
    <div class="links">
        <a target="_blank" href="https://www.youtube.com/channel/UCUwHObXqdY0OC3c3gNDkKFw"><img id="youtube" class="footer-link" src="${isHome ? `` : `../`}images/youtube-logo.png" alt="YouTube"></a>
        <a target="_blank" href="https://www.instagram.com/jojo/?hl=en"><img id="insta" class="footer-link" src="${isHome ? `` : `../`}images/instagram-logo.png" alt="Instagram"></a>
    </div>`;
  footer.innerHTML = html;
  console.log(html);
}



function display(page) {
  header(page);
  let isHome = page == "home";
  footer(isHome);
}

footer(true);

body {
  background: #000;
}

.footer-link {
  color: #fff;
}

.footer-link:hover {
  color: rgb(255, 221, 153);
}

<footer></footer>

它应该改变悬停时的颜色，但是什么也没发生。

Answer 1

使用DOM方法.createElement和.appendChild代替.innerHTML = html_block。像这样的东西。

function footer(isHome) {
    const footer = document.getElementsByTagName("footer")[0];
    let el = document.createElement('p');
    el.innerHTML = 'oJo Studios 2019';
    footer.appendChild(el);
    el = document.createElement('div');
    el.className = 'links';
    let anchor = documeent.createElement('a');
    anchor.href = 'https://www.youtube.com/channel/UCUwHObXqdY0OC3c3gNDkKFw';
    //other attributes
    el.appendChild(anchor);
    footer.appendChild(el);
    //and so on
}

内部HTML不使用我的链接样式表

1 个答案: