使用javascript加载页面后，将外部CSS应用于动态html

I have the following in an external js, which is deferred until after page load.

我在外部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();

The html is placed in the div, but the css from soc.css is not applied to the new content of the div.

html放在div中,但是来自soc.css的css不会应用于div的新内容。

Is there any way to apply css to div's after the initial load. I would prefer not having to keep all the css on the page for initial load if possible. Not using jQuery.

有没有办法在初始加载后将css应用于div。如果可能的话,我宁愿不必在页面上保留所有css以进行初始加载。不使用jQuery。

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

Updated here

Here is what I have:

这是我有的:

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>

When I run both your's or my code in the js the exact happens. The html from social.html is placed in the div on index.html

当我在js中运行你的代码或我的代码时,确实发生了。来自social.html的html放在index.html的div中

The images from soc.css appear in correct div classes on index.html

来自soc.css的图像出现在index.html上的正确div类中

The following 3 lines in this example are never applied:

从不应用此示例中的以下3行:

 #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}

No console error's and it appears the styles do not get updated either.

没有控制台错误,似乎样式也没有更新。

When I click on

当我点击

 <ul id="sm">

this is what I get

这就是我得到的

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;
}

When I click on an individual li I get this

当我点击个人李时,我得到了这个

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

Your thoughts.

2 个解决方案

#1

Try this:

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();

#2

I figured out why the css was not getting applied like it should have. Comes down to cache. soc.css was being called by another page so it was not getting downloaded since it was already in cache. I changed the file name of both the css and html then css was applied correctly.

我弄清楚为什么css没有像应该的那样得到应用。来吧缓存。 soc.css被另一个页面调用,所以它没有被下载,因为它已经在缓存中了。我更改了css和html的文件名,然后正确应用了css。