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">marplo.net/javascript/curs-jquery-tutoriale-js</div>
<button id="btn">Click</button>
</body>
</html>

Demo:

Curs jQuery

marplo.net/javascript/curs-jquery-tutoriale-js

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">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.
Demo:

Curs jQuery

marplo.net/javascript/curs-jquery-tutoriale-js

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">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.
Ca sa vedeti efectul, apasati click pe urmatoarele doua linii de text:

Curs jQuery

marplo.net/javascript/curs-jquery-tutoriale-js

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: 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".
Demo:

Cursuri pt. Web Development

Web site: marplo.net

Verificare daca o clasa e adaugata

Cu jQuery se poate de asemenea verifica daca elementul selectat are o anumita clasa CSS, folosind metoda hasClass().
Sintaxa:

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.
Demo:

Div cu class="cls"

DIV fara class

Alt div cu class="cls"

<<-jQuery - Elemente .. -- Efecte jQuery simple de ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag creaza un text ingrosat?

<p>Adresa: <strong>http://CoursesWeb.net/</strong> - Tutoriale.</p>

Care din aceste coduri CSS afiseaza textul ingrosat?

text-size: 18px; font-style: italic; font-weight: 800;

#id {
  font-weight: 800;
}

Ce functie JavaScript apeleaza o alta functie, in mod repetat, la un anumit interval de timp?

setInterval() setTimeout() push()

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

Clic pe variabila definita corect in PHP.

var vname = 8; $vname = 8; $vname == 8;

$vname = 8;
echo $vname;

Care din urmatoarele forme ale verbului "travel" (a calatori) e la timpul Prezent Perfect?

have traveled shall travel had traveled

We have traveled in space.
- Noi am calatorit (deja) in spatiu.

Care din urmatoarele forme ale verbului "pintar" (a picta) se foloseste la Trecutul Imperfect?

ir a pintar pintaba pintó

La niña pintaba un arco iris.
- Fetita picta un curcubeu.

jQuery - stiluri CSS

Curs Javascript

Citire proprietati CSS

Setare proprietati CSS

Adaugare si stergere clase

Verificare daca o clasa e adaugata

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month