jQuery - stiluri CSS
Dupa ce au fost selectate elementele HTML cu jQuery, se pot manipula proprietatile lor CSS pentru a crea diferite efecte.
Citire proprietati CSS
Proprietatile CSS ale unui element HTML se pot citi /prelua cu urmatoarea sintaxa:
$('selector').css('proprietate_css');
- selector - reprezinta un element HTML.
- proprietate_css - proprietatea CSS ce va fi citita.
Codul din urmatorul exemplu preia valorile proprietatilor "width" si "background-color" ale primului <div> cu class="cls", apoi afiseaza aceste valori intr-o fereastra Alert, cand butonul cu id="btn" e apasat:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Citire stil CSS</title>
<style type="text/css"><!--
.cls {
width:250px;
background-color:#bcefcd;
border:2px solid blue;
}
--></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
// preia width si background-color ale primului <div> cu class="cls"
var div1_width = $('div.cls:first').css('width');
var div1_bgcolor = $('div.cls:first').css('background-color');
// afiseaza un Alert cand tag-ul HTML cu id="btn" e apasat
$('#btn').click(function(){
alert('width = '+ div1_width+ ' , bgcolor = '+ div1_bgcolor);
});
});
--></script>
</head>
<body>
<div class="cls">Curs jQuery</div>
<div class="cls">www.marplo.net/javascript/curs-jquery-tutoriale-js</div>
<button id="btn">Click</button>
</body>
</html>
jQuery obtine valoarea poprietatii CSS data de browser, nu cea adaugata in definitia CSS. Astfel, daca aveti un DIV cu inaltimea de 300 pixeli setata in CSS, dar continutul din el determina o inaltime mai mare de 300, jQuery va furniza inaltimea actuala a acelui DIV, nu cea de 300 specificata in CSS.
Setare proprietati CSS
Pentru a seta o proprietate CSS la un element HTML cu jQuery, se foloseste urmatoarea sintaxa:
$('selector').css('proprietate_css', 'valoare');
Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
// seteaza font-size la toate tag-urile <div> cu class="cls", cand tag-ul cu id="btn" e apasat
$('#btn').click(function(){
$('div.cls').css('font-size', '20px');
});
});
--></script>
<div class="cls">Curs jQuery</div>
<div class="cls">www.marplo.net/javascript/curs-jquery-tutoriale-js</div>
<button id="btn">Click</button>
Codul de sus seteaza proprietatea CSS
font-size:20px; la toate tag-urile <div> cu class="cls", cand tag-ul cu id="btn" e apasat.
Daca vreti sa setati mai multe proprietati CSS intr-o singura expresie, puteti folosi urmatoarea sintaxa:
$('selector').css({ 'prop1': 'valoare', 'prop2': 'valoare' });
- Puteti adauga oricate perechi 'prop':'valoare', separate prin virgula intre acolade.
Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
// setare mai multe proprietati CSS la <div> cu class="cls", cand e apasat
$('div.cls').click(function(){
$(this).css({'margin': '3px auto', 'background': '#bcfecd', 'color': 'blue'});
});
});
--></script>
<div class="cls">Curs jQuery</div>
<div class="cls">www.marplo.net/javascript/curs-jquery-tutoriale-js</div>
Codul de sus seteaza:
margin:2px auto; background':#bcfecd; color:blue; la oricare <div> cu class="cls", cand se apasa click pe el.
Adaugare si stergere clase
jQuery permite cu usurinta adaugarea, stergerea si comutarea claselor CSS. Iata cateva sintaxe prin care se realizeaza aceste actiuni:
$('selector').addClass('nume_clasa'); - adauga class "nume_clasa" la elementele HTML reprezentate de "selector".
$('selector').addClass('nume_clasa1 nume_clasa2'); - adauga class "nume_clasa1" si "nume_clasa2" la elementele HTML reprezentate de "selector".
$('selector').removeClass('nume_clasa'); - sterge clasa "nume_clasa" din elementele HTML reprezentate de "selector".
$('selector').toggleClass('nume_clasa'); - comuta class "nume_clasa" (o adauga daca nu e setata, si o sterge daca e adaugata).
Exemplu:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Adaugare, Stergere clase CSS</title>
<style type="text/css"><!--
.cls1 { border:2px solid #01da02; color:blue; }
.cls2 { background:#bcfecd; font-size:18px; }
--></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
// adauga class "cls2" la tag-ul cu id="id1", sterge clasa "cls1" din toate <div>
// cand se apasa click pe tag-ul cu id="btn"
$('#btn').click(function(){
$('#id1').addClass('cls2');
$('div').removeClass('cls1');
});
});
--></script>
</head>
<body>
<div class="cls1">Cursuri pt. Web Development</div>
<div id="id1">Web site: www.marplo.net</div>
<button id="btn">Click</button>
</body>
</html>Codul jQuery de mai sus adauga class "cls2" la tag-ul cu id="id1", si sterge clasa "cls1" din toate <div> cand se apasa click pe eticheta HTML cu id="btn".
Verificare daca o clasa e adaugata
Cu jQuery se poate de asemenea verifica daca elementul selectat are o anumita clasa CSS, folosind metoda hasClass().
if ($(unElement').hasClass('nume_clasa')) {
// efectueaza ceva aici
}
- Daca elementul HTML specificat de "unElement" are clasa CSS "nume_clasa", browser-ul va executa codul dintre acolade.
Exemplu:
<script type="text/javascript"><!--
$(document).ready(function() {
// cand mouse-ul e pe un DIV cu class="cls", ii adauga o bordura
$('div').mouseover(function() {
if($(this).hasClass('cls')) {
$(this).css('border', '2px solid blue');
}
});
});
--></script>
<div class="cls">Div cu class="cls"</div>
<div>DIV fara class</div>
<div class="cls">Alt div cu class="cls"</div>
Acest cod adauga un chenar la fiecare DIV cu class="cls", cand mouse-ul e pe el.
