Schimba fisierul CSS cu jQuery

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.

Iata un exemplu, o pagina simpla cu un <div> si un paragraf. Cand se apasa click pe DIV, o instructiune jQuery schimbba /alterneaza fisierul css inclus in pagina web, intr-un tag <style> care are id="stl" (pentru detalii, vedeti comentariile din cod).

Pagina Web

<!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>

Fisierul style.css

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

Fisierul style2.css

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

Demo:

Click aici:
Alterneaza fisierul CSS din pagina
Intre "style.css" si "style2.css"

Acest paragraph are display:none; in style2.css

<<-Drag si Drop cu .. -- Inregistrare evenimente la elemente ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag este element de tip bloc?

<div>Web Programming and Development</div>

Care cod CSS afiseaza textul subliniat?

font-style: italic; text-decoration: underline; font-weight: 500;

h2 {
  text-decoration: underline;
}

Clic pe functia JavaScript care apeleaza o alta functie dupa un anumit timp.

insertBefore() setTimeout() querySelector()

function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);

Clic pe instructiunea care returneaza numarul total de elemente dintr-un array asociativ.

count($array) count($array, 1) strlen()

$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie"));
$nr_food = count($food, 1);
echo $nr_food;       // 6

Indicati Viitorul Perfect la negativ al verbului din paranteze, in propozitia: "The child (to not play) by Sunday".

has't played haven't been playing will haven't played

The child will haven't played by Sunday.
- Copilul nu s-ar fi jucat pana duminica.

Indicati Viitorul Perfect pentru verbul "contar" (a povesti) la forma "Él".

habrá contado va a contar contaba

Él no habrá contado el cuento.
- El nu ar fi spus povestea.

Last accessed pages

Articole - Exercitii si teste engleza incepatori ⁽⁸²⁷²⁾
Curs CSS Online Tutoriale CSS3 ^(116744)
Prepozitii - Prepositions ^(33041)
Nu sunt in pericol nicaieri ⁽¹¹⁾
Formatare text in pagina html ^(36074)

Popular pages this month

Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax ⁽¹²⁸²⁾
Curs HTML gratuit Tutoriale HTML5 ⁽⁹⁸¹⁾
Coduri pt culori ⁽⁷³²⁾
Creare si editare pagini HTML ⁽⁵⁶⁸⁾
Conditional IF in Limba Engleza - Fraze Conditionale ⁽⁵²⁸⁾