css მეთოდი
css მეთოდი საშუალებას აძლევს ელემენტის
CSS სტილების მიღებას და შეცვლას.
მნიშვნელოვანია გვახსოვდეს, რომ ჩვენ ვიღებთ 'გამოთვლილ
მნიშვნელობებს' თვისებების (computed style
properties), რომლებიც შეიძლება განსხვავდებოდეს
css სტილებში მითითებულებისგან.
სინტაქსი
ერთი თვისების მიღება:
$(სელექტორი).css(თვისება);
რამდენიმე თვისების მიღება, გადაცემული პარამეტრი - თვისებების სახელების მასივი:
$(სელექტორი).css(['width', 'height', 'color']);
ერთი თვისების შეცვლა:
$(სელექტორი).css(თვისება, ახალი მნიშვნელობა);
შევცვალოთ რამდენიმე თვისება, გადავცეთ ისინი ობიექტის სახით,
რომელიც შეიცავს წყვილებს 'გასაღები: მნიშვნელობა'. თვისების სახელი
მითითებულია CamelCase სახით:
$(სელექტორი).css({fontSize: '12px', color: 'red'});
ან, ალტერნატიული ვარიანტი:
<p class="www">ტექსტი</p>
$('.www').css({'font-size':'12px', 'color':'red'});
ასევე ჩვენ შეგვიძლია გამოვიყენოთ მოცემული ფუნქცია ყოველ
ელემენტზე კოლექციაში. ამ შემთხვევაში ფუნქცია პირველ პარამეტრად მიიღებს
ელემენტის ნომერს კოლექციაში, ხოლო მეორე პარამეტრად
- მიმდინარე მნიშვნელობას მოცემული css თვისების
კონკრეტული ელემენტისთვის. ამ შემთხვევაში this
ფუნქციის შიგნით მიუთითებს მიმდინარე ელემენტზე.
CSS თვისება ყოველი ელემენტის შეიცვლება იმით,
რასაც ფუნქცია დააბრუნებს კონკრეტულად ამ ელემენტისთვის:
$(სელექტორი).css(თვისების სახელი, function(ნომერი კოლექციაში, მიმდინარე მნიშვნელობა css თვისების));
მაგალითი
მოდით მივიღოთ ყველა ელემენტი კლასით www
და შევცვალოთ მათი ფერი წითელზე:
<p class="www">ტექსტი</p>
$('.www').css('color', 'red');
მაგალითი
მოდით მივიღოთ ყველა ელემენტი კლასით www
და შევცვალოთ მათი ფერი წითელზე, ხოლო ფონტის ზომა
- 20px-ზე:
<p class="www">ტექსტი</p>
$('.www').css({color:'red', fontSize:'20px'});
ან, ალტერნატიული ვარიანტი:
<p class="www">ტექსტი</p>
$('.www').css({'color':'red', 'font-size':'20px'});
