内部 html 未使用我的链接样式表

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 未使用我的链接样式表

Inner html not using my linked stylesheet

html

javascript

css

innerhtml

hover