Внутренний HTML не использует мою связанную таблицу стилей - PullRequest
Новая
       5

Внутренний HTML не использует мою связанную таблицу стилей

0 голосов
/ 28 апреля 2019

Я пытаюсь создать скрипт, который вставит мой верхний и нижний колонтитулы во все мои страницы, но вставленный 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>

Это должно изменить цвет при наведении, но ничего не происходит.

1 Ответ

1 голос
/ 28 апреля 2019

Используйте методы 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
}
...