我正在尝试制作一个脚本,将我的页眉和页脚插入到我的所有页面中,但插入的 html 不使用我的链接样式表。当我尝试对我拥有的图像提出特定样式请求时,我发现了这一点。
我搜索了所有谷歌,但没有任何效果。我尝试注入(inject)一种样式,但这没有做任何事情(它使页脚消失了)。
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>
它应该在悬停时改变颜色,但没有任何反应。
最佳答案
使用 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
}
关于javascript - 内部 html 不使用我的链接样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55887259/