我的页面上有几个链接(在a中<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需要更长/更短的时间.
如果我需要澄清任何内容,请告诉我,我可以提供更多代码.
我试图动态地添加使用javascript CSS样式表规则,类似例子2 这里.
它大部分时间都有效,但似乎有一种竞争条件,有时会导致(至少)Chrome(15.0.874和17.0.933)失败.当缓存为空(或已被清除)时,它很少发生.
这就是我能够将其缩小到的范围.首先,我通过附加一个外部样式表来加载它<head>,然后我创建一个新的样式表(我将添加规则).然后我打印document.styleSheets(立即和1秒后)的长度.
$(function() {
// it doesn't happen if this line is missing.
$("head").append('<link rel="stylesheet" type="text/css"'+
'href="/css/normalize.css" />');
var stylesheet = document.createElement("style");
stylesheet.setAttribute("type", "text/css");
document.getElementsByTagName('head')[0].appendChild(stylesheet);
var b = $('body');
b.append(document.styleSheets.length).append('<br/>');
setTimeout(function() {
b.append(document.styleSheets.length).append('<br/>');
}, 1000);
});
(在http://jsfiddle.net/amirshim/gAYzY/13/上播放)
当缓存是明确的,有时打印2,然后4(的jsfiddle增加了它自己的2个css文件),这意味着它不会添加样式表或者document.styleSheets立即...但也许等待外部文件加载.
这是预期的吗？
如果是这样,MDN上的示例2(以及其他许多其他内容)是否已损坏？从第27行开始:
var s = document.styleSheets[document.styleSheets.length - 1];
可能会评估 document.styleSheets.length == 0
请注意,当我不首先加载外部CSS文件时,不会发生这种情况.