我有一个使用以下功能执行以下操作的函数javascript：
appendChild 身体上的 div。document.defaultView.getComputedStyle(divElement, null)[cssRule].现在getComputedStyle返回默认值，如果我在调用前使用 Firebug等待断点getComputedStyle，那么它会从注入的 CSS 返回 CSS 规则。
问候，
穆尼姆
您可以创建动态 css url 并使用普通的 ajax 调用以纯文本形式获取 css。
然后使用它来加载css：
function loadCss(cssText, callback){
var style = document.createElement('style');
style.type='text/css';
if(callBack != undefined){
style.onload = function(){
callBack();
};
}
style.innerHTML = cssText;
head.appendChild(style);
}
并像这样使用它：
loadCss(ajaxResponseText, function(){
console.log("yaay css loaded, now i can access css defs");
})
这实际上是我所做的。
为了确保加载特定的 CSS 文件，我在 CSS 文件的末尾添加了一个样式。例如：
#ensure-cssload-8473649 {
display: none
}
现在我有一个 JavaScript 函数，它会在页面上加载上述样式时触发指定的回调：
var onCssLoad = function (options, callback) {
var body = $("body");
var div = document.createElement(constants.TAG_DIV);
for (var key in options) {
if (options.hasOwnProperty(key)) {
if (key.toLowerCase() === "css") {
continue;
}
div[key] = options[key];
}
}
var css = options.css;
if (css) {
body.appendChild(div);
var handle = -1;
handle = window.setInterval(function () {
var match = true;
for (var key in css) {
if (css.hasOwnProperty(key)) {
match = match && utils.getStyle(div, key) === css[key];
}
}
if (match === true) {
window.clearTimeout(handle);
body.removeChild(div);
callback();
}
}, 100);
}
}
这就是我如何使用上面的函数：
onCssLoad({
"id": "ensure-cssload-8473649",
css: {
display: "none"
}
}, function () {
// code when you want to execute
// after your CSS file is loaded
});
这里的第一个参数采用optionswhere idis 检查测试样式和 css 属性，以验证从 CSS 加载的内容。
我假设您这样做是因为您需要动态创建样式表的 URL。
想到了几个选项：
1）创建URL服务器端，完全避免这个问题。
2) 使用 setTimeout 检查样式是否已加载并每 20 毫秒左右检查一次，直到 getComputedStyle 返回您想要的值。
我根本不喜欢#2 ......但这是一个选择。如果您使用 #2，请确保即使出现异常也清除超时。
这是一个似乎适用于所有浏览器的解决方案。
function loadCss(fileUrl) {
// check for css file type
if (fileUrl.indexOf(".css")==fileUrl.length-4) {
// Create link element
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", fileUrl);
if (typeof fileref!="undefined") {
// remove the . if this is a relative link
if(fileUrl.indexOf('.')==0) {
fileUrl = fileUrl.substr(1);
}
// generate the full URL to use as the fileId
var pathname = window.location.pathname;
var pathUrl = pathname.substr(0,pathname.lastIndexOf("/"));
var fileId = window.location.protocol + "//" + window.location.host + pathUrl + fileUrl;
// append the newly created link tag to the head of the document
document.getElementsByTagName("head")[0].appendChild(fileref);
// begin checking for completion (100ms intervals up to 2000ms)
this.checkCSSLoaded(fileId,100,0,2000);
} else throw 'INVALID_CSS_ERROR';
} else throw 'INVALID_CSS_ERROR';
}
function checkCSSLoaded(cssHref,milliPerCheck,milliPerCount,milliTimeout) {
// Look through all sheets and try to find the cssHref
var atSheet = -1;
var sheetLength = document.styleSheets.length;
while(++atSheet < sheetLength ) {
if(cssHref == document.styleSheets[atSheet].href) {
// If found dispatch and event or call a procedure
/* Do whatever is next in your code here */
return;
}
}
// check for timeout
if(milliCount > milliTimeout) {
alert('INVALID_CSS_ERROR::'+" ("+cssHref+"+ not found!");
/* Do whatever happens if timeout is reached here */
return;
}
// else keep trying
setTimeout(checkCSSLoaded ,milliPerCheck, cssHref, milliPerCheck, milliCount+millPerCheck, milliTimeout);
}
本质上我们
使用 document.styleSheets 检查是否加载了 css 是错误的，因为只要将 css 链接添加到 DOM，它就会从 document.styleSheets 中可用，即使它尚未加载。
向 CSS 中添加标记也很麻烦。
正确的解决方案是监听 onload 事件：
var loadedCss = {};
cssHref = "http://www.foo.com/bar.css";
css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", cssHref);
css.onload = function(){
loadedCss[cssHref] = true;
}
document.getElementsByTagName("head")[0].appendChild(css);
function isCssLoaded(url) {
return loadCss[url];
}