Как задать id элементу js
Перейти к содержимому

Как задать id элементу js

  • автор:

Обращение к элементу по id

Обычно в литературе для доступа к элементу рекомендуют использовать document.getElementById(«id_») . Например, изменить ширину элемента:

document.getElementById("scroller").width = "100px"; 

Но часто встречаю исходники, где к элементу обращаются по id непосредственно так:

scroller.width = "100px"; 

Насколько это правильно и допустимо?
Отслеживать
user262779
задан 26 дек 2017 в 14:45
1,978 1 1 золотой знак 16 16 серебряных знаков 26 26 бронзовых знаков
у вас получалось так обратиться к элементу?
26 дек 2017 в 14:47
да, как ни странно. Вполне
26 дек 2017 в 15:12

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

«Если элементу назначен специальный атрибут id, то можно получить его прямо по переменной с именем из значения id. Это поведение соответствует стандарту . Оно существует, в первую очередь, для совместимости, как осколок далёкого прошлого и не очень приветствуется, поскольку использует глобальные переменные. Браузер пытается помочь нам, смешивая пространства имён JS и DOM, но при этом возможны конфликты. Более правильной и общепринятой практикой является доступ к элементу вызовом document.getElementById(«идентификатор»)»

«Язык JavaScript. Часть 2», Илья Кантор, 2015 г

Element.id

Свойство id представляет идентификатор элемента, отражая глобальный атрибут id.

Если значение id не пустое, то оно должно быть уникально в документе.

id часто используется с getElementById , чтобы получить нужный элемент. Часто применяют ID как селектор, для стилизации документа, с помощью CSS.

Примечание: идентификаторы чувствительны к регистру, но вам следует избегать создание id, которых различает регистр (смотрите Чувствительность к регистру в классах и идентификаторов).

Синтаксис

var idStr = element.id; // Получаем id.
element.id = idStr; // Применяем id.

idStr — идентификатор элемента

Спецификации

Specification
DOM Standard
# ref-for-dom-element-id①

Совместимость с браузерами

BCD tables only load in the browser

Как задать id элементу равное id другого элемента

Не могу понять, как сделать ассоциацию между элементами. Задача такая: есть несколько групп элементов с классами Start и End, нужно чтобы id Start равнялось id End, но чтобы этот id отличался от других групп таких элементов, например:

Все элементы лежат в одном контейнере. Для получения разных значений id Start, использую рандомные числа по этой функции

Отслеживать
задан 23 янв 2019 в 10:29
user324358 user324358
149 10 10 бронзовых знаков
Вопрос не совсем понятен, но нельзя ли присваивать элементам id=»start_one», > и т.д?
23 янв 2019 в 10:32
id должен быть уникален. На странице не может быть более одного элемента с одним и тем же id
23 янв 2019 в 10:34

Нужно получить случайное значение (это делает рандомайзер), записать его в id Start, а потом передать в id End. С первым шагом я справился, а вот второй не могу понять, как реализовать. При попытке присвоить id End id Start, у меня присваивается значение только из первого Start

23 янв 2019 в 10:35

@smellyshovel ну тогда можно передавать значение id Start в атрибут data End, но у меня передается для всех End значения только из первого Start

Element: метод setAttribute()

Метод setAttribute() интерфейса Element устанавливает значение атрибута для указанного элемента. Если атрибут уже существует, то его значение будет обновлено, а если нет, то будет добавлен атрибут с соответствующим именем и значением.

Для получения текущего значения атрибута используйте getAttribute() , для удаления нужно вызвать removeAttribute() .

Если необходимо поработать с атрибутами узла (например, при клонировании другого элемента) перед его добавлением, можно использовать метод setAttributeNode() (en-US).

Синтаксис

setAttribute(name, value) 

Параметры

Строка, представляющая имя атрибута, для которого устанавливается значение. Имя атрибута автоматически преобразуется в нижний регистр если setAttribute() вызывается для HTML-элемента в HTML-документе.

Строка, содержащая значение для установки. Любое нестроковое значение автоматически преобразуется в строку.

Логические атрибуты считаются равными true , если они есть у элемента, вне зависимости от значения. Следует устанавливать в качестве значения для value пустую строку ( «» ) или имя атрибута без пробелов в начале и конце. Смотрите пример ниже для наглядной демонстрации.

Поскольку значение value преобразуется в строку, присвоение значения null не приводит к удалению атрибута или установке его значения в null . Вместо этого произойдёт установка значения равного строке «null» . Для удаления атрибута необходимо вызвать removeAttribute() .

Возвращаемое значение

Исключения

Возникает если значение name не является корректным именем XML (например, начинается с цифры, дефиса или точки или содержит символы, отличные от буквенно-цифровых символов, символов подчеркивания, дефисов и точек).

Примеры

В следующем примере setAttribute() используется для установки атрибута элемента .

HTML

button>Привет, мир!button> 
button  height: 30px; width: 100px; margin: 1em; > 

JavaScript

const button = document.querySelector("button"); button.setAttribute("name", "helloButton"); button.setAttribute("disabled", ""); 

Этот пример иллюстрирует два аспекта:

  • Первый вызов setAttribute() изменяет значение атрибута name на «helloButton». Это можно увидеть с помощью инспектора кода в браузере (Chrome, Edge, Firefox, Safari).
  • Используемое значение при установке логического атрибута не важно. Само наличие атрибута означает, что он равен true , а отсутствие — false . Таким образом, присваивая значению атрибута disabled пустую строку ( «» ), мы переключаем disabled в true , что приводит к отключению кнопки. В качестве значения для логических атрибутов рекомендуется использовать пустую строку или имя самого атрибута.

Спецификации

Specification
DOM Standard
# ref-for-dom-element-setattribute①

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Element.hasAttribute()
  • Element.getAttribute()
  • Element.removeAttribute()
  • Element.toggleAttribute() (en-US)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *