Curs Javascript

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

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut e folosit in tag-ul <a> pentru adresa link-ului?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Ce proprietate CSS seteaza tipul fontului utilizat?
font-family text-decoration font-size
h2 {
  font-family:"Calibri", sans-serif;
}
Ce instructiune selecteaza toate tag-urile <div> cu class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // numar elemente selectate
alert(nr_elms);
Indicati functia care returneaza suma valorilor dintr-un array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Indicati forma corecta a verbului "study" (a studia) la Trecutul Simplu in aceasta propozitie: "We (study) English."
studyed studys studied
We studied English.
- Noi am studiat engleza.
Indicati forma corecta a verbului "decir" (a spune) la Prezent in aceasta propozitie: "Yo (decir) siempre la verdad."
digas digo decir
Yo digo siempre la verdad.
- Eu spun mereu adevarul.
Schimba fisierul CSS cu jQuery

Last accessed pages

  1. CSS3 Transformari 2D (733)
  2. Adjective - Exercitii si teste engleza incepatori (8828)
  3. Modificare culoare si marime caractere (688)
  4. Curs CSS Online Tutoriale CSS3 (58657)
  5. Metode ale obiectului String in JS (378)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (5367)
  2. Curs HTML gratuit Tutoriale HTML5 (4411)
  3. Curs si Tutoriale JavaScript (3780)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3701)
  5. Curs CSS Online Tutoriale CSS3 (3654)