Dupa ce au fost selectate elementele HTML cu jQuery, se pot manipula proprietatile lor CSS pentru a crea diferite efecte.
$('selector').css('proprietate_css');- selector - reprezinta un element HTML.
<!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.discant.ro/javascript/curs-jquery-tutoriale-js</div> <button id="btn">Click</button> </body> </html>Demo:
$('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.discant.ro/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.
$('selector').css({ 'prop1': 'valoare', 'prop2': 'valoare' });- Puteti adauga oricate perechi 'prop':'valoare', separate prin virgula intre acolade.
<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.discant.ro/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.
<!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.discant.ro</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".
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.
<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.