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

Ce atribut e folosit in tag-ul <img> pentru adresa imaginii?

href src rel

<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />

Care din aceste coduri CSS ascunde elementul in pagina?

display: none; display: inline; position: relative;

#id {
  display: none;
}

Ce instructiune opreste executia lui while() sau for() ?

continue prompt() break

for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}

Indicati functia utilizata pentru a crea constante.

define() include() defined()

define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;

Care este forma de plural a substativului "class" (clasa)?

classes clases clasis

This school has three classes.
- Scoala asta are trei clase.

Care este pluralul substativului "voz" (voce)?

vose voze voces

Escuché dos voces.
- Am auzit doua voci.

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