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