使用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>

滑动分页

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

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

请注意，我不想硬编码基本网址，因为它会根据托管环境发生变化，如

应用程序。项目com/baseurl/css/Theme。css
应用程序。项目com/UAT/css/Theme。css
应用程序。项目com/design/css/Theme。css

Answer 1

只需用新名称替换themename即可

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

Answer 2

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

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