Вторник, 16 Апреля 2013 08:35

Классы HTML элементов

Written by 
Оцени эту запись
(2 Голоса)

Классы HTML элементов отличаются от их идентификаторов тем, что могут принадлежать более, чем одному элементу. Точнее, вы можете задать один и тот же класс любому количеству HTML элементов.

 

Пример:

 

<i class="icon blue">&nbsp;</i>

<i class="icon red">&nbsp;</i>

<i class="icon green">&nbsp;</i>

<i class="icon yellow">&nbsp;</i>

 

 

Класс icon является общим для всех указанных элементов. При помощи этого, мы может задать элементам общее оформление в CSS, используя селектор класса:

 

.icon {

display: block;

float: left;

width: 30px;

height: 30px;

margin-right: 5px;

background-image: url(images/icon.phg);

}

 

 

А при помощи дополнительных классов blue, red и т.д., мы может добавить оформление каждому элементу отдельно:

 

.icon.blue {

background-position: -30px 0;

}

 

 

Как видно, при наличии у элемента нескольких классов, в CSS они прописываются через точку. В элемента же они заданы через пробел.

 

Классы можно использоваться для обращения к элементу не только из CSS, но и из JavaScript:

 

document.getElementsByClassName('icon')

 

В данном случае, мы получим массив элементов с классом icon. Даже если элемент с таким классом единственный на HTML странице, результатом все равно будет массив. Для получения нужного элемента, мы должны указать соответствующий номер элемента в массиве:

 

document.getElementsByClassName('icon')[0]

 

 

Класс задается HTML элементу при помощи артибута class:

 

<i class="icon">&nbsp;</i>

 

 

Имя класса может подержать буквы и цифры, но первом в названии должна идти буква.

 

 

При помощи JavaScript вы можете добавлять и удалять классы элементов:

 

document.getElementsByClassName('icon')[0].addClass('new');

document.getElementsByClassName('icon')[0].removeClass('new');

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов