Применение внешнего CSS к динамическому HTML после загрузки страницы с использованием JavaScript

Question

Применение внешнего CSS к динамическому HTML после загрузки страницы с использованием JavaScript

0

У меня есть во внешнем js, который откладывается до загрузки страницы.

var stylesheet=document.createElement("link");
stylesheet.href="//soc.css";
stylesheet.rel="stylesheet";
document.getElementsByTagName("head")[0].appendChild(stylesheet);
window.___gcfg={parsetags:'onload'};

var xObj=new XMLHttpRequest();
xObj.open('GET','social.html',true);
xObj.onreadystatechange=function() {
    if(this.readyState == 4 && this.status == 200) { 
        document.getElementById("foot").innerHTML=this.responseText;
    }
};
xObj.send();

Html помещается в div, но css из //soc.css не применяется к новому содержимому div.

Есть ли способ применить css к div после начальной загрузки. Я бы предпочел не оставлять все css на странице для начальной загрузки, если это возможно. Не использовать jQuery.

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Обновлено здесь

Вот что я имею:

index.html

<div id=foot></div>

//soc.css

.s{background:url(soc.png) no-repeat top left;width:32px;height:32px}
.s.s-1{background-position:0}
.s.s-2{background-position:-37px 0}
.s.s-3{background-position:-74px 0}
.s.s-4{background-position:-111px 0}
.s.s-5{background-position:-148px 0}
#sm li{display:inline-block;max-width:100%;padding:3px}
#sm{list-style:none;margin-left:-40px;text-align:center}
#ft{font-size:22px;margin:80px 0 0;text-align:center}

social.html

<p>Join us on Google+
<hr>
    <ul id=sm>
        <li><a href=//plus.google.com><div class="s s-1" title=googleplus></div></a>
        <li><a href=https://www.facebook.com><div class="s s-2" title=facebook></div></a>
        <li><a href=https://twitter.com><div class="s s-3" title=twitter></div></a>
        <li><a href=#><div class="s s-4" title=pinterest></div></a>
        <li><a href=http://www.linkedin.com><div class="s s-5" title=linkedin></div></a>
    </ul>
<hr>
<h1 id=ft>Hello</h1>

Когда я запускаю как ваш, так и мой код в js, это происходит точно. Html из social.html помещается в div на index.html

Изображения из //soc.css отображаются в правильных классах div на index.html

Следующие три строки в этом примере никогда не применяются:

 #sm li{display:inline-block;max-width:100%;padding:3px}
 #sm{list-style:none;margin-left:-40px;text-align:center}
 #ft{font-size:22px;margin:80px 0 0;text-align:center}

Отсутствует ошибка консоли, и кажется, что стили также не обновляются.

Когда я нажимаю

 <ul id="sm">

это то, что я получаю

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

Когда я нажимаю на отдельную ли, я получаю это

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

Твои мысли.

Kurt Marshman 21 март 2014, в 19:26

Источник

0

оберните это в функцию и вызовите это. Js, загруженные отдельно, просто не выполняются автоматически, он должен быть вызван.
Muhammad Umer 21 март 2014, в 17:44
0

это ваш this.responseText HTML или другой, который должен быть помещен в div.
Suman Bogati 21 март 2014, в 17:45
0

вызвать функцию после добавления html в функцию readystatechange.
Muhammad Umer 21 март 2014, в 17:46
0

@MuhammadUmer - так окружить функцию css именем, а затем вызвать функцию после добавления html?
Kurt Marshman 21 март 2014, в 18:06

Показать ещё 2 комментария

Теги:

javascript

html

css

2 ответа

Ещё вопросы

оберните это в функцию и вызовите это. Js, загруженные отдельно, просто не выполняются автоматически, он должен быть вызван.
это ваш this.responseText HTML или другой, который должен быть помещен в div.
вызвать функцию после добавления html в функцию readystatechange.
@MuhammadUmer - так окружить функцию css именем, а затем вызвать функцию после добавления html?

Muhammad Umer · Answer 1 · 2014-03-21T17-41-00.000Z

Попробуй это:

function addCss() {
 var stylesheet=document.createElement("link");
 stylesheet.href="//soc.css";
 stylesheet.rel="stylesheet";
 stylesheet.type = 'text/css'
 document.getElementsByTagName("head")[0].appendChild(stylesheet);
 window.___gcfg={parsetags:'onload'};
}
var xObj=new XMLHttpRequest();
xObj.open('GET','social.html',true);
xObj.onreadystatechange=function(){
 if(this.readyState==4&&this.status==200){ 
  document.getElementById("foot").innerHTML=this.responseText;
  addCss();
 }};
xObj.send();

Я попробовал ваше предложение. CSS все еще не применяется. HTML заполняет div, изображения приходят из файла css, как они были, но сами стили не применяются.
попробуйте эту новую вещь и проверьте при проверке, действительно ли добавлен файл css, и проверьте консоль на наличие ошибок.
добавлена дополнительная информация выше

Kurt Marshman · Answer 2 · 2014-03-24T15-34-00.000Z

Я понял, почему css не применяется, как должно быть. Попадает в кеш. //soc.css вызывалась другой страницей, поэтому она не загружалась, поскольку она уже была в кеше. Я изменил имя файла как css, так и html, тогда css был применен правильно.