jQuery изменение стиля таблицы стилей не работает

jQuery изменение таблицы стилей без изменения. Я пытаюсь изменить таблицу стилей с помощью jQuery. Таблица стилей меняется, но свойства таблицы стилей не работают. Как я могу решить эту проблему.jQuery изменение стиля таблицы стилей не работает

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

источник

2016-03-28 kannan D.S

даже он работает, вам нужно перезагрузить, чтобы применить новый CSS!и это не правильный способ изменения css! – Pedram

@jiff, 'reload'? Перезагрузка перезагружает 'css' Я думаю! – Rayon

При нажатии вы хотите изменить свою таблицу стилей, не так ли? браузер, как обнаружить, должен обновлять ваши стили? – Pedram

Попробуйте это:

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

jsFiddle

только если вы хотите сохранить новый стиль, если пользователь может делать перезагрузку, вы должны установить куки, чтобы сохранить настройки пользователя.

несколько 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>

источник

2016-03-28 06:40:35 Pedram

его не работает –

Он просто решает вашу проблему, я имею в виду, что он изменит вашу таблицу стилей, но, поскольку я сказал вам, что в комментарии не будет загружаться ваша новый стиль. Я обновляю сообщение хорошим методом. – Pedram

@ kannanD.S Я тестировал это, он отлично работает, не нужно использовать другой метод. – Pedram

Попробуйте следующий код:

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

источник

2016-03-28 06:51:24 WisdmLabs

Да, вы можете обновить новый стиль-лист по обновление <link> и appedning его к <head> следующим образом:

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

См plunkr

Здесь h1 имеет color:red, который изменяет к green как стиль-листа источника изменяется от style.css к style1.css по нажатию на кнопку change style ,

Вот HTML код:

<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1>Hello Plunker!</h1> 
    <a class="clickToStyle">change Style</a> 
    </body> 

</html>

имеет style.css как оригинальный CSS.

В JS:

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

Источник стилей заменяется style1.css и, следовательно, новые стили получить применяется.

источник

2016-03-28 06:53:22

ithink этот метод невозможен, потому что он всегда добавляет на каждом клике, и если у нас есть несколько таблиц стилей, что происходит? –

вы можете предоставить скрипту –

, вы можете дать классу ссылку на ссылку «link1», а затем использовать описанный выше метод для обновления как «$ ('. Link1'). Attr ('href', 'style1.css'). AppendTo ('глава');" См. Plunkr «https://plnkr.co/edit/2QQAm8dm7voJZoAgfOmq?p=preview» –

jQuery изменение стиля таблицы стилей не работает

ответ

Смежные вопросы