26

私のページ ( 内<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);

問題は、ブラウザーが新しいスタイルシートをダウンロードするのに時間がかかり、警告メッセージに古い背景色が表示されることがあることだと思います。すべてのスタイルシートがページにロードされた後にのみ警告する、バインドできるイベントはありますか?

現時点ではsetTimeout(function(){}, 5000);、ページ上のすべての CSS をロードするのに時間がかかる/短い場合はどうでしょうか。

何か明確にする必要がある場合はお知らせください。さらにコードを提供できます。

4

6 に答える 6

20

新しいリンク要素を作成してヘッドに追加するのではなく、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'));
  });
});

このコードを実際にテストしていないため、構文エラーが発生する可能性がありますが、ロジックは十分に健全なはずです。

于 2010-04-03T14:18:06.183 に答える
13

読み込みイベントは、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 でのみ機能します。

于 2010-04-03T20:07:32.817 に答える
0

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
});
于 2013-07-24T08:33:00.140 に答える
0 
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 で正常にテストされました

于 2013-07-24T07:56:43.490 に答える
-2

背景色が同じであるかどうかを確認し続け、変更された場合はそれを実行することができます。

oldbackground=getbackground()
function checkbackground(){
    if(oldbackground!=getbackground()){
        oldbackground=getbackground()
        //Do your thing
    }
}
setInterval(checkbackground,100)
于 2010-04-03T14:05:19.117 に答える