加载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
调用之后放入)获得新的背景色:
var bgcolor = $('body').css('background-color');alert(bgcolor);
我认为问题是浏览器需要花费一些时间来下载新的样式表,并且有时我的警报消息中还会出现旧的背景色。我可以绑定一些事件,该事件仅在页面上所有样式表加载后才会提醒我吗?
目前,我所能想到的只是使用了a setTimeout(function(){},
5000);,效果并不理想,因为如果要花费更长或更短的时间来加载页面上的所有CSS,该怎么办。
让我知道是否需要澄清什么,我可以提供更多代码。
回答:
无需创建新的link元素并将其附加到头部,您可以使用AJAX调用来检索样式表的内容,并将其插入到内联样式块中。这样,您可以使用jQuery的“
complete”回调来触发检查。
$('#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'));
});
});
我尚未实际测试此代码,因此可能存在一些语法错误,但逻辑应该足够合理。
以上是 加载CSS后触发的jQuery事件? 的全部内容, 来源链接: utcz.com/qa/408721.html