在CSS加载后触发的jQuery事件？
我在我的页面上有几个链接（在一个<div id="theme-selector"> ），它允许你改变CSS样式表：
$('#theme-selector a').click(function(){ var path = $(this).attr('href'); $('head link').remove(); $('head').append('<link type="text/css" href="'+path+'" rel="stylesheet" />'); return false; });
现在，在改变页面的样式之后，我想使用下面的代码（在$('head').append call）之后得到新的背景颜色：
var bgcolor = $('body').css('background-color'); alert(bgcolor);
问题是，我认为，浏览器下载新的样式表需要一些时间，而且我有时会在我的警报消息中获得旧的背景颜色。 是否有一些事件，我可以绑定，只会在页面上加载所有样式表后提醒我？
目前，我所能想到的是使用setTimeout(function(){}, 5000); 这不是很好，因为如果加载页面上的所有CSS需要更长/更短的时间。
让我知道如果我需要澄清任何事情，我可以提供更多的代码。
除了创build一个新的链接元素并将其添加到头部之外，您可以使用AJAX调用来检索样式表的内容，并将其插入到embedded式样式块中。 这样，您可以使用jQuery的“完整”callback来触发您的支票。
$('#theme-selector a').click(function(){ var path = $(this).attr('href'); $.get(path, function(response){ //Check if the user theme element is in place - if not, create it. if (!$('#userTheme').length) $('head').append('<style id="userTheme"></style>'); //populate the theme element with the new style (replace the old one if necessary) $('#userTheme').text(response); //Check whatever you want about the new style: alert($('body').css('background-color')); }); });
我没有真正testing这个代码，所以可能会有一些语法错误，但逻辑应该足够健全。
加载事件可以观察任何与url相关的元素，加载CSS样式表时这不适合你吗？ http://api.jquery.com/load-event/
尝试这样的事情：
var path = $(this).attr('href'); $('head link').remove(); var styleSheet = $('<link type="text/css" href="'+path+'" rel="stylesheet" />'); styleSheet.load(function(){alert("Loaded");}); $('head').append(styleSheet);
编辑：如下所示，这只能在IE中起作用，谁会想到？
var cssLoaded = function() { alert($('body').css('background-color')); }; $('#theme-selector a').click(function(){ var path = $(this).attr('href'); $('head link').remove(); $('head').append('<link onload="cssLoaded();" type="text/css" href="'+path+'" rel="stylesheet" />'); return false; });
在Chrome 28，IE 10，FF22中成功testing
你可以使用lazyload （jQuery插件）加载一个css文件。 它包含文件时可以调用函数。
例：
// Load a CSS file and pass an argument to the callback function. LazyLoad.css('foo.css', function (arg) { // put your code here });
你可以简单地继续检查背景颜色是否仍然相同，然后做你的事情，如果它改变。
oldbackground=getbackground() function checkbackground(){ if(oldbackground!=getbackground()){ oldbackground=getbackground() //Do your thing } } setInterval(checkbackground,100)
