检测 CSS 文件何时完成 switch

发布于 2024-12-04 01:10:20 字数 937 浏览 4 评论 0原文

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

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

}

，然后使用这个函数检测是否已加载。

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

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

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

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

原文

I have a page that allows users to dynamically change the loaded theme (stylesheet). I have a themeStyle <link> element that stores the currently loaded stylesheet. I'm switching it like this

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

}

and then using this function to detect if it's loaded.

It was working sporadically, but I realized it was probably never working because the #themeStyle css will always be loaded, but not necessarily changed.

I added passing the css file path to the _cssIsLoaded function, but it changes before the load is complete, so I don't know what to use to check if it has switched.

The only solution I can think of now is to have a hidden div stylePath to it as content: element in every stylesheet, and check if that div's content is the correct stylePath... but that requires changing every stylesheet, the HTML and the JS as well as just being somewhat cludgy. Is there any more reasonable way to achieve this?

edit: I've thought of just adding the new styles at the end, but there's possibility that not all the styles will be overridden by the new one. There's a base stylesheet always in place and these particular rules being loaded only affect one part of the page.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

两个我 2024-12-11 01:10:20

一个简单的解决方案是使用 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; }

A simple solution would be using JS to change the class on the body element. I would then have 2 sets of css. Each set would have all its selectors prefixed with the class you put on the body element. So something like

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

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

回复收藏 0 原文

浮生未歇 2024-12-11 01:10:20

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

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);
}

I settled on adding an incrementing number after the id of the style tag, when I switch the style, I add the new stylesheet and remove the old one, then check with the new number to see if it has been loaded.

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);
}

回复收藏 0 原文

~没有更多了~