Question

我在外部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中，但是来自soc.css的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中运行你的代码或我的代码时，确实发生了。来自social.html的html放在index.html的div中

来自soc.css的图像出现在index.html

上的正确div类中

此示例中的以下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}

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

当我点击

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

你的想法。

Answer 1

试试这个：

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

Answer 2

我弄清楚为什么css没有按照应有的方式应用。下来缓存。 soc.css被另一个页面调用，所以它没有被下载，因为它已经在缓存中了。我更改了css和html的文件名，然后正确应用了css。

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

2 个答案: