Schimba fisier Stylesheet cu Javascript / Jquery

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
George02
Mesaje: 10

Schimba fisier Stylesheet cu Javascript / Jquery

Salut! De curand m-am apucat si eu de javascript si jqery (ma pricep mai bine la jquery) si vreau sa ma ajutati si pe mine cu ceva.
Am un bec si vreau ca atunci cand dau click pe el sa se schimbe stylesheet-ul pe style1.css si cand dau click din nou sa se schimbe la loc pe style.css

am cautat pe net si am gasit destul de multe scripturi dar care nu se potrivea nici-unul pentru mine. Uita-ti la ce script m-am oprit.

Cod: Selectaţi tot

<script type="text/javascript">
function changeStyle(url) {
document.getElementById('stylesheet').href = url;
}
</script>
<a href="#" onclick="changeStyle('style1.css');" ondblclick="changeStyle('style.css');" ><div id="bec"></div></a>
Chestia cu dublu click eu am pus-o dar nu vreau asa...

Deci ideea este daca puteti sa imi scrie-ti si mie un script pentru a face chestia asta si mai vreau sa stiu daca se poate verifica ce stylesheet este incarcat adica:

Cod: Selectaţi tot

if(style1.css.is load function() 
alert "ceva") 
)
MarPlo Mesaje: 4343
Salut
Poate te ajuta acest exemplu si explicatiile din cod, ca sa adaptezi la cum vrei sa faci:

Cod: Selectaţi tot

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Schimba fisierul CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" id="stl" />
</head>
<body>
<div id="idd"> Click aici:<br />
Alterneaza fisierul CSS din pagina<br />
Intre "style.css" si "style2.css"</p>

<script type="text/javascript"><!--
// fisierul CSS e ales in functie de valoarea pozitiva sau negativa a acestei variabile
var plusmin = 1;
var elm = document.getElementById('idd');

elm.addEventListener('click',chgCss,false);    // inregistreaza eveniment click la "elm"

// functia apelata de eveniment
function chgCss() {
  var stl = document.getElementById('stl');   // preia elementul care include fisierul css
  plusmin *= -1;     // alterneaza polaritatea variabilei "plusmin"

  '// seteaza fisierul css adaugat, in functie de plusmin'
  stl.href = plusmin>0 ? 'style.css' : 'style2.css';
}
--></script>
</body>
</html>
- Iar pentru varianta cu jQuery, vezi tutorialul: Schimba fisierul CSS cu jQuery.
George02 Mesaje: 10
Mersi mult! Am reusit sa fac ceea ce vroiam exemplul cu jqeury a fost exact de ceea ce aveam nevoie mersi!

Dar acum te intreb se poate verifica care stylesheet este folosit?
MarPlo Mesaje: 4343
Daca folosesti varianta cu jQuery, fisierul folosit e retinut in variabila stl .

Cod: Selectaţi tot

$(document).ready(function() {
  var stl = 'style.css';
  var plusmin = 1;

  // la click pe elementul cu id="idd"
  $('#idd').click(function(){
    plusmin *= -1;        // modifica polaritatea variabilei "plusmin"
    stl = plusmin>0 ? 'style.css' : 'style2.css';     // seteaza fisierul css, in functie de plusmin

    // schimba fisierul css din tag-ul cu id="stl" si rel="stylesheet"
    $('#stl[rel=stylesheet]').attr('href', stl);
    alert(stl);
  });
});

Subiecte similare