Acest tutorial arata cum puteti schimba fisierul CSS inclus in pagina dv. web, folosind jQuery.
De exemplu, daca avem 2 fisiere CSS, "style.css" si "style2.css", putem defini un cod jQuery ca sa alterneze fisierul CSS inclus in pagina, intre aceste 2 fisiere, cand utilizatorul apasa click pe un anumit element.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Schimba fisierul CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" id="stl" />
<script type="text/javascript" src="jquery_library.js"></script>
<script type="text/javascript"><!--
// fisierul CSS e ales in functie de valoarea pozitiva sau negativa a acestei variabile
var plusmin = 1;
$(document).ready(function() {
// la click pe elementul cu id="idd"
$('#idd').click(function(){
plusmin *= -1; // modifica polaritatea variabilei "plusmin"
var 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);
});
});
--></script>
</head>
<body>
<div id="idd"> Click aici:<br />
Alterneaza fisierul CSS din pagina<br />
Intre "style.css" si "style2.css"</div>
<p class="hdp">Acest paragraf are display:none; in style2.css</p>
</body>
</html>
body { text-align: center; }
#idd {
width: 200px;
background: #a7efa8;
margin: 2px auto;
border: 2px solid blue;
padding: 5px 8px;
text-align: left;
font-size: 16px;
cursor: pointer;
}
#idd {
width: 300px;
margin: 2px auto 2px 80px;
background: #dadafe;
border: 2px dashed #a0cea1;
padding: 5px 8px;
font-size: 16px;
font-weight: bold;
text-align: center;
cursor: pointer;
}
p.hdp { display: none; }
Acest paragraph are display:none; in style2.css
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250"> <param name="src" value="file.swf" /> Browser-ul dv. nu suporta SWF. </object>
input:focus {
background-color: #88fe88;
}var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";I planted the third tree. - Am plantat al treilea pom.
Yo planté el tercero árbol. - Am plantat al treilea pom.