У меня есть во внешнем 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;
}
Твои мысли.
Попробуй это:
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 не применяется, как должно быть. Попадает в кеш. soc.css вызывалась другой страницей, поэтому она не загружалась, поскольку она уже была в кеше. Я изменил имя файла как css, так и html, тогда css был применен правильно.
this.responseText
HTML или другой, который должен быть помещен в div.