Javascript 当我们动态更改css文件时，如何避免内容的非样式化闪现？_Javascript_Jquery_Html_Css

Javascript 当我们动态更改css文件时，如何避免内容的非样式化闪现？

javascript jquery html css

Javascript 当我们动态更改css文件时，如何避免内容的非样式化闪现？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我的jQuery函数，它取代了CSS文件 function BallyChangeTheme(theme) { var links = $("link"); var _t = theme; $.each(links, function (i, link) { var _h = $(link).attr('href'); _h1 = _h.replace(/T.*e[0-9]/, _t); if (

这是我的jQuery函数，它取代了CSS文件

function BallyChangeTheme(theme) {
    var links = $("link");
    var _t = theme;
    $.each(links, function (i, link) {            
        var _h = $(link).attr('href');
        _h1 = _h.replace(/T.*e[0-9]/, _t);
        if (_h1 !== _h) {               
            $(link).attr('href', _h1);                
        }
    });
}

有15个链接元素！css文件被替换后，转换并不平滑。当用户选择更改主题时，您知道如何提供流畅的用户体验吗？

正如@rory mccrossan所说，将所有CSS放在同一个文件中，但范围在正文的不同顶级类下，例如：

HTML

你不能。这里的简单解决方案是：不要交换CSS文件。将所有样式放在一个单独的样式中，并通过类在父元素（如主体）上设置关键帧。或者使用默认模板和两个不同的主题CSS，仅用于更改颜色和其他内容。因此，布局保持不变，只有主题发生变化。

<body class="style-a">
    <a href="" class="btn" title="Toggle styles">Toggle styles</a>
</body>

.style-a {
    a {color: red;}
}
.style-b {
    a {color: blue;}
}

$('.btn').on('click', function(e) {
    e.preventDefault();
    $('body').toggleClass('style-a').toggleClass('style-b');
});