Question

我有一个页面，允许用户动态更改加载的主题（样式表）。我有一个themeStyle <link>元素，用于存储当前加载的样式表。我正在像这样切换它

function switchTemplate(stylePath){
    var ns = $('<link>', {
            href: stylePath,
            id: 'themeStyle',
            type: 'text/css', 
            rel: 'stylesheet'
        });
    $('#themeStyle').replaceWith(ns);
    self._cssIsLoaded(ns.get(0), stylePath);

}

然后使用this function检测它是否已加载。

它偶尔会工作，但我意识到它可能永远不会工作，因为#themeStyle css将始终被加载，但不一定会改变。

我添加了将css文件路径传递给_cssIsLoaded函数，但它在加载完成之前发生了变化，所以我不知道用什么来检查它是否已经切换。

我现在能想到的唯一解决方案是将隐藏的div stylePath作为内容：每个样式表中的元素，并检查div的内容是否是正确的stylePath ...但是这需要更改每个样式表，HTML 和 JS以及有点笨拙。有没有更合理的方法来实现这个目标？

编辑：我想到最后只添加了新的样式，但是有可能并不是所有的样式都会被新的样式覆盖。始终存在基本样式表，并且加载这些特定规则仅影响页面的一部分。

Answer 1

一个简单的解决方案是使用JS来改变body元素上的类。然后我会有2套css。每个集合的所有选择器都会以您放在body元素上的类为前缀。像

这样的东西

<link href="theme1.css" /> 
contains:
body.theme1 a { color: #ff000; }

<link href="theme2.css" />
contains:
body.theme2 a { color: #0000ff; }

Answer 2

我决定在样式标记的id之后添加一个递增的数字，当我切换样式时，我添加新的样式表并删除旧的样式表，然后检查新的数字以查看它是否已被加载。 / p>

function switchTemplate(stylePath){
    var osid = $('[id^="themeStyle-"]');
    var stylenum = osid[0].id.split('-')[1];
    var newstylenum = (Number(stylenum) + 1).toString();
    var ns = $('<link>', {
            href: stylePath,
            id: 'themeStyle-' + newstylenum,
            type: 'text/css', 
            rel: 'stylesheet'
        });
    $("head").append(ns);
    $('#themeStyle-' + stylenum).remove();
    _cssIsLoaded(ns.get(0), stylePath);
}

检测CSS文件何时完成切换

2 个答案: