加载CSS后触发的jQuery事件？

小编典典

加载CSS后触发的jQuery事件？

css

我的页面上有几个链接（位于内<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，该怎么办。

让我知道是否需要澄清什么，我可以提供更多代码。

阅读 445

2020-05-16

共1个答案

小编典典

无需创建新的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'));
  });
});

我尚未实际测试此代码，因此可能存在一些语法错误，但逻辑应该足够合理。

2020-05-16