Каково различие между идентификатором и классом?
Вы можете использовать функцию, подобную этой:
const userCount = 234567;
const roundIt = n => {
const numberLength = Math.ceil(Math.log10(n + 1));
const decrease = n > 100 ? 2 : 1;
return Math.floor(n / Math.pow(10, numberLength - decrease)) * Math.pow(10, numberLength - decrease);
};
// Display user count
document.querySelector(".user-count").innerHTML = userCount;
// Display rounded count
document.querySelector(".user-count-rounded").innerHTML = roundIt(userCount);
User count: 0
Rounded user count: 0
Мы используем длину числа и раунд используя тот же код, который вы написали.
Вот скрипка: https://jsfiddle.net/anandchowdhary/fj0zk1x8/7/
10 ответов
ids должно быть уникальным, где как class может быть применен ко многим вещам. В CSS id с похожи #elementID и class, элементы похожи .someClass
В целом, используют id каждый раз, когда Вы хотите обратиться к определенному элементу и class, когда у Вас есть много вещей, которые все подобны. Например, распространенный id элементы являются вещами как [1 111], footer, sidebar. Распространенный class элементы являются вещами как [1 115] или external-link.
Это - хорошая идея читать на каскаде и понять приоритет, присвоенный различным селекторам: http://www.w3.org/TR/CSS2/cascade.html
самый основной приоритет необходимо понять, однако, то, что id селекторы имеют приоритет более чем [1 118] селекторы. Если у Вас было это:
<p id="intro" class="foo">Hello!</p>
и:
#intro { color: red }
.foo { color: blue }
текст был бы красным, потому что id селектор имеет приоритет по class селектор.
Класс для применения Вашего стиля группе элементов. Идентификационные стили относятся просто к элементу с тем идентификатором (должен только быть один). Обычно Вы используете классы, но если существует одноразовое, можно использовать идентификаторы (или просто засунуть стиль прямо в элемент).
Любой элемент может иметь класс или идентификатор.
класс А используется для ссылки на определенный тип дисплея, например, у Вас может быть класс CSS для отделения, которое представляет ответ на этот вопрос. Как будет много ответов, нескольким отделениям было бы нужно то же моделирование, и Вы будете использовать класс.
идентификатор обращается только к единственному элементу, например, связанный раздел справа может иметь моделирование, характерное для него не снова использованный в другом месте, это использовало бы идентификатор.
Технически можно использовать классы для всего этого или разделить их логически. Вы не можете, однако, снова использовать идентификатор для нескольких элементов.
Идентификаторы уникальны. Классы не. Элементы могут также иметь несколько классов. Также классы могут быть динамично добавлены и удалены к элементу.
Где угодно можно использовать идентификатор, Вы могли использовать класс вместо этого. Реверс не верен.
конвенция, кажется, для использования идентификаторов для элементов страницы, которые находятся на каждой странице (как "navbar" или "меню"), и классы для всего остального кроме этого только конвенция, и Вы найдете широкое различие в использовании.
Еще одно различие - то, который для формы вводил элементы, эти <label> ссылки на элемент поле идентификатором, таким образом, необходимо использовать идентификаторы, если Вы собираетесь использовать <label>. вещь доступности, и действительно необходимо использовать ее.
В годах, которые уводят идентификаторы, были также предпочтены, потому что они легкодоступны в JavaScript (getElementById). С появлением jQuery и других платформ JavaScript это - в значительной степени надуманный вопрос теперь.
CSS объектно-ориентирован. В идентификаторе говорится, что экземпляр, класс говорит класс.
КЛАСС должен использоваться для нескольких элементов, для которых Вы хотите то же моделирование. идентификатор должен быть для уникального элемента. Посмотрите этот учебное руководство .
, которое необходимо отослать к стандарты W3C , если Вы хотите быть строгим конформистом, или если Вы хотите, чтобы Ваши страницы были , проверил к стандартам.
Идентификатор должен быть уникальным на целой странице.
класс А может относиться ко многим элементам.
Иногда, это - хорошая идея использовать идентификаторы.
На странице, у Вас обычно есть один нижний колонтитул, один заголовок...
Затем нижний колонтитул может быть в отделение с идентификатором
< идентификатор отделения = класс "нижнего колонтитула" = "..." >
и все еще имеют класс
Возможно, аналогия поможет пониманию различия:
<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />
Студент идентификационные карты отличны. Ни у каких двух студентов в кампусе не будет того же студента идентификационная карта. Однако многие студенты могут и совместно использовать по крайней мере один Класс друг с другом.
Это должно хорошо поместить несколько студентов до одного заголовок Класса , таких как Биология. Но никогда не приемлемо подвергнуть несколько студентов одному студенту идентификатор .
При предоставлении Правила по школьной системе внутренней связи, можно дать Правила к Класс :
"Завтра, все студенты должны носить красную рубашку к классу Биологии".
.Biology {
color: red;
}
Или можно дать правила Определенному Студенту путем вызова его уникального идентификатор :
"Jonathan Sampson должен носить зеленую рубашку завтра".
#JonathanSampson {
color: green;
}
В этом случае, Jonathan Sampson получает две команды: один как студент в классе Биологии и другом как прямое требование. Поскольку Jonathan сказали непосредственно, через идентификационный атрибут, носить зеленую рубашку, он игнорирует более ранний запрос для износа красной рубашки.
более определенная победа селекторов.
Классы похожи на категории. Много элементов HTML могут принадлежать классу, и элемент HTML может иметь больше чем один класс. Классы используются для применения общих стилей или стилей, которые могут быть применены через несколько элементов HTML.
идентификаторы являются идентификаторами. Они уникальны; никому больше не разрешают иметь тот же самый идентификатор. Идентификаторы используются для применения уникальных стилей к элементу HTML.
я использую идентификаторы и классы этим способом:
<div id="header">
<h1>I am a header!</h1>
<p>I am subtext for a header!</p>
</div>
<div id="content">
<div class="section">
<p>I am a section!</p>
</div>
<div class="section special">
<p>I am a section!</p>
</div>
<div class="section">
<p>I am a section!</p>
</div>
</div>
В этом примере, заголовок и разделы содержания могут быть разработаны через #header и #content. Каждый раздел содержания может быть применен общий стиль через #content .section. Только для ударов, я добавил "специальный" класс для среднего раздела. Предположим, что Вы хотели, чтобы конкретный раздел имел специальное моделирование. Это может быть достигнуто с .special классом, все же раздел все еще наследовал общие стили от #content .section.
, Когда я делаю JavaScript или разработку CSS, я обычно использую идентификаторы для получения доступ/управления к очень определенному элементу HTML, и я использую классы для получения доступ/применения к стилям к широкому диапазону элементов.
Где использовать идентификатор по сравнению с классом
Простое различие между этими двумя - то, что, в то время как класс может неоднократно использоваться на странице, идентификатор должен только использоваться однажды на страницу. Поэтому уместно использовать идентификатор на элементе отделения, который повышает основное содержание на странице, поскольку только будет один раздел основного содержания. Напротив, необходимо использовать класс для установки альтернативных цветов строк на таблице, поскольку они по определению собираются быть используемыми несколько раз.
Идентификаторы являются невероятно мощным инструментом. Элемент с идентификатором может быть целью части JavaScript, который управляет элементом или его содержанием в некотором роде. Идентификационный атрибут может использоваться в качестве цели внутренней ссылки, заменяя теги привязки с атрибутами имени. Наконец, если Вы ясно даете понять свои идентификаторы и логичный, они могут служить своего рода “сам документация” в рамках документа. Например, необходимо не обязательно добавить комментарий перед блоком, заявив, что блок кода будет содержать основное содержание, если открывающий тэг блока будет иметь идентификатор, скажем, "основного", "заголовок", "нижний колонтитул", и т.д.