Witam
Jak zrobic wybór pliku CSS.
Dokładnie: dwa przyciski na stronie CSS1 i CSS2 i <ort>naprzykład </ort>strona po kliknieciu CSS1 jest w odcieniach zielonych a CSS2 w żółtych.
Mam stronke zrobioną i dwa CSSy do tego.
Pomóżcie bo gmyram i gmyram i nic
Koziołek napisał(a)
Czysty JS, który podmieni odpowiedni node w <head />
moglbys napisac jak ...
sorka ale nie chcę mi się tego wymyślać na nowo więc ukradnę ci odpowiedni kod z bash.org.pl:
<link rel="stylesheet" type="text/css" href="/m/style.css" />
<link rel="alternate stylesheet" title="szary" type="text/css" href="/m/szary.css" />
<link rel="alternate stylesheet" title="zielony" type="text/css" href="/m/zielony.css" />
<link rel="alternate stylesheet" title="czarny" type="text/css" href="/m/czarny.css" />
<link rel="alternate stylesheet" title="rozowy" type="text/css" href="/m/rozowy.css" />
w ten sposób będzie można sobie wybierać style z menu przeglądarki (w ff: widok -> styl strony -> szary/zielony/czarny/rozowy)
funkcja w js jest taka:
function setActiveStyleSheet(styleName) {
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = this.getAttribute('title') != styleName;
});
$.cookie('style', styleName, {expires: 365, path: '/'});
}
funkcja ta szuka wszystkie tagi < link > i podmienia dla nich wartość "disabled", ustawiając jako aktywny tylko jeden styl, oraz ustawia ciasteczko o nazwie "style" na 365 dni
funkcja ta korzysta z jquery więc musisz sobie ściągnąć do siebie najlepiej najnowszą wersje tego skryptu i go wywołać albo oprogramować sobie to po swojemu bez jquery
przyciski do zmiany tak:
<a rel="nofollow" class="stylechange rozowy" href="#" onclick="setActiveStyleSheet('rozowy')"></a>
<a rel="nofollow" class="stylechange czarny" href="#" onclick="setActiveStyleSheet('czarny')"></a>
jeszcze tylko pozostaje przywołanie stylu z ciasteczka:
a dzieje się to tu:
```javascript
$(document).ready(function() {
var c = $.cookie('style');
if (c) setActiveStyleSheet(c);
}
ta funkcja również wykorzystuje jquery, ale idee widać więc możesz sobie też łatwo zamienić kod na niezależny
Jezu, po co się tyle pierniczyć?
<link rel="stylesheet" type="text/css" id="styl1" href="/m/style.css" />
Funkcja podmiany:
function podmienStyl(styln, spath) {
document.getElementById(styln).href = spath;
}
Użycie:
podmienStyl('styl1', '/m/innystyl.css');
Pierwszy parametr przyjmuje ID linijki w której definiujemy LINK, a drugi source nowego stylu.
bo bez javascriptu nie będzie można zmienić stylu
poza tym jakie "tyle pierniczyć", pełnowartościowy kod jest od twojej prowizorki dwie linie dłuższy:
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = this.getAttribute('title') != styleName;
});
VS
document.getElementById(styln).href = spath;
po prostu pominąłeś ustawienie ciasteczka i podanie przykładu wykorzystania, dlatego ci się wydaje że jest krócej
BTW, w jquery nie stosuje się już w selektorach przed nazwą atrybutu znaku @:
$('link[rel*=style][title]').each(function...
Demonical Monk: Twoja wersja niby prostsza, łatwiejsza, ale nie za elegancka. Co się stanie jak chcesz przenieść cały katalog z cssami gdzieś indziej ? W kodzie nr 1 zmieniasz tylko ścieżki w elemenach <link> i nigdzie poza tym. W Twoim kodzie trzeba bezpośrednio ingerować w kod.
Po prostu oddzielenie warstwy logiki od wyglądu ;)
I się tak nie denerwuj :P byle powód, a Ty dramatyzujesz jakbyś dziennikarzyną był.
pocomyslec, za takie onclick to powinno się za ... wieszać.
manfredek napisał(a)
pocomyslec, za takie onclick to powinno się za ... wieszać.
po pierwsze nie mój kod tylko przeklejony żywcem z bash.org.pl (poza jedną drobną poprawką która mnie po prostu wkurzała)
a po drugie niby czemu? za ... wieszać to się powinno za href="javascript:funkcja()", a tak jest imo poprawnie akurat