RÓŻNICE POMIĘDZY ID I CLASS

Fundamentem styli Css i zabawy z najpopularniejszą biblioteką javascript jQuery, są atrybuty oznaczone haszem, płotkiem – id i kropką – class. Każdy kto miał styczność z kodem HTML dobrze je zna, więc tekst ten raczej na celu przypomnienie zasad jakimi rządzą się poszczególne atrybuty.

Kiedy więc używać ID, a kiedy Class?

ID jest unikatowe, class nie.

Jak powszechnie wiadomo atrybuty class i id możemy łączyć w jednym elemencie kodu html:

<div class=”button” id=”top”></div>

Kolejna różnica jest taka, że elementy class, w przeciwieństwie do ID możemy ze sobą łączyć:

<div class=”button small red”></div>

Najważniejszą cechą jest jednak to, że ID używamy dla 1 unikatowego elemetu na stronie, gdzie class możemy używać wielokrotnie. Najłatwiej jest to przedstawić na kodzie Html:

<div id=”comments”>
 <div class=”user-comment”><span>treść komentarza 1</span></div>
 <div class=” user-comment”><span>treść komentarza 2</span></div>
 <div class=” user-comment”><span>treść komentarza 3</span></div>
 </div>

Kratka w jQuery

Jako że, ID w jquery odwołuje się do często używanej funkcji w javascript GetElementById, a także biorąc pod uwagę fakt, że może występować na stronie tylko raz, dzięki czemu skrypt nie musi szukać atrybuty po całym drzewie DOM jasnym staje się, że używanie ID jest szybsze.

Płotki i kropki w css

W3school zwraca uwage, aby trzymać się zasady, iż ID powinien być unikatowy. Dla styli to obojętne czy obsługują kropkę czy płotek. Uwagę należy zwrócić na pewno na fakt, że płotek ma ustawiony priorytet ponad kropką, co przedstawia przykład:

<style>
 . button {color:red;}
 #top{color:black;}
 </style>

HTML:

<div class=”button” id=”top”>Treść buttona</div>
Przy takich stylach css efektem będzie kolor czarny tekstu.

Testy

Z ciekawości sprawdziłem unikatowość ID w jQuery i Css. Utworzyłem po 2 elementy DIV z takimi samymi ID i CLASS:

HTML:

<div id=" someid ">div 1 ID</div>
 <div>div 1 CLASS</div>
 <div id=" someid ">div 2 ID</div>
 <div>div 2 CLASS</div>

CSS:

<style>
 .someclass {color:#ff0000;}
 #someid {color:#00ff00;}
 </style>

Efekt:
test css

Wnioski jakie się nasuwają są co najmniej ciekawe, czyżby css miał „baga”?

Sprawdźmy jeszcze zmianę koloru za pomocą skryptu jQuery:

 $(function() {
$('.someclass’).css('background','#0000ff');
$('#someid’).css('background','#00ff00');
 })

test css jquery
W tym wypadku ID tylko 1 elementu podlega zmianom,hmmm…. Może coś źle zrobiłem? Spróbujmy jeszcze raz, tym razem każdy element z osobna:

$(function() {
$('. Someclass’).css('background','#0000ff');
$('#someid’).each(function(e){
$(this).css('background','#00ff00');
})
})

test css jquery

Wynik jest podobny jak poprzednim razem. Wnioski jakie można wysunąć są takie, że CSS ma błąd bądź też ma to po prostu gdzieś.

Co o tym sądzicie?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code