Question

jQuery点击事件样式表更改无法正常工作。我正在尝试使用jQuery更改样式表，样式表正在更改但样式表属性不起作用。我该如何解决这个问题。

$(document).ready(function() {
$(".theme1").click(function() {
$("#switch").attr({href : "theme1.css"});
});
});

Answer 1

试试这个：

$('#toggleStyle').click(function (){
   $('link[href="style.css"]').attr('href','styleNew.css');
});

<强> jsFiddle

如果您想在用户重新加载时保留新样式，则应设置cookie以保持用户设置。

使用选择选项的多CSS：

$('#ChangeStyle').change(function (){
    var val = $(this).val();
   $('link[rel="stylesheet"]').attr('href',val+'.css');
});

<强> HTML

<select id="ChangeStyle">
  <option value="Style1">Style 1</option>
  <option value="Style2">Style 2</option>
  <option value="Style3">Style 3</option>
</select>

带按钮的多CSS：

$('.toggleStyle').each(function (){
$(this).click(function (){
    var rel = $(this).attr('rel');
   $('link[rel="stylesheet"]').attr('href',rel+'.css');
});
});

<强> HTML

<a class="toggleStyle" rel="Style1">Style 1</a>
<a class="toggleStyle" rel="Style2">Style 2</a>
<a class="toggleStyle" rel="Style3">Style 3</a>
<a class="toggleStyle" rel="Style4">Style 4</a>
<a class="toggleStyle" rel="Style5">Style 5</a>

Answer 2

请尝试以下代码：

<head><link id="test" href="yourstyle.css" rel="stylesheet" type="text/css" /></head>

Jquery的::

$(document).ready(function() {
  $(".theme1").click(function() {
  $("#test").attr("href", "newStyle.css");
  });
});

Answer 3

是的，您可以通过更新<link>并将其更新为<head>来更新新的样式表，如下所示：

$('<link/>', {rel: 'stylesheet', href: 'style1.css'}).appendTo('head');

请参阅plunkr

此处h1的{{1}}更改为color:red，因为点击{{1}时样式表来源已从green更改为style.css }}按钮。

这是html代码：

style1.css

style.css 作为原始css。

在JS中：

change style

样式表源代替 style1.css ，因此会应用新样式。

jQuery单击事件样式表更改不起作用

3 个答案: