使用 jquery 动态更改 CSS 导入的名称

Question

我想使用 jquery 动态更改 CSS 导入的名称。 来自

到

HTML

<div class="theme-pallete">
   <button class="blue active" data-theme="Theme">Blue</button>
   <button class="golden" data-theme="goldenTheme">Golden</button>
   <button class="purple" data-theme="purpleTheme">Purple</button>
   <button class="pink" data-theme="pinkTheme">Pink</button>
   <button class="red" data-theme="redTheme">Theme</button>
</div>

jQuery

$('.theme-pallete button').on('click', function () {
    var sheetName = $(this).attr('data-theme');
    $('link[href$="Theme.css"]').attr('href', '/css/' + sheetName + '.css');
});

它在本地系统上运行良好，但是当 Base Url 出现时出现问题

请注意，我不想硬编码基本 URL，因为它会根据托管环境而变化，例如

app.project.com/baseurl/css/Theme.css
app.project.com/UAT/css/Theme.css
app.project.com/design/css/Theme.css

Answer 1

您可以使用function（其中第二个参数是旧值）并替换该方法。

$('.theme-pallete button').on('click', function () {
    var sheetName = 'blueTheme';
    $('link[href$="Theme.css"]').attr('href', (i, value) => value.replace(/Theme\.css$/, sheetName + '.css');
});

Answer 2

只需将主题名称替换为新名称即可

function changeCssURL(themename){
 $("button").click(function(){
   $('link[href$="Theme.css"]').attr("href", "app.project.com/UAT/css/"+themename+".css");
  });
}