Как удалить атрибут js

Как удалить атрибут элемента при помощи JS?

scope=»scope» — аттрибут элемента. Чтобы удалить все аттрибуты, не нужен jQuery:

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

Как отмечено в комментариях, можно и сразу выбрать только нужные элементы (только те, что содержат нужный аттрибут)

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript jquery или задайте свой вопрос.

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Атрибуты и стили

При построении страницы браузер берёт информацию об элементах из их атрибутов. Но, кроме того, все элементы страницы являются объектами со своими свойствами, которые также учитываются при отображении элементов. DOM-интерфейс позволяет работать и с атрибутами элементов и с их свойствами.

Свойство attributes

У любого элемента есть свойство attributes, с помощью которого можно получить коллекцию его атрибутов, в виде объекта NamedNodeMap . Каждый атрибут в этой коллекции имеет имя, который совпадает с именем атрибута. Доступ к атрибуту в этой коллекции осуществляется по его индексу или с помощью метода item. Отсчёт атрибутов в этой коллекции начинается с 0.

Для работы с узлами (получения значения узла, добавление нового узла или удаления существующего) используются следующие методы объекта NamedNodeMap : getNamedItem(), setNamedItem(), removeNamedItem() и hasAttributes()

Методы элемента для работы с его атрибутами

Кроме свойства attributes, которое возвращает атрибуты в виде NameNodeMap , у каждого элемента есть методы getAttribute(), setAttribute(), removeAttribute(), hasAttribute(), которые позволяют работать с его атрибутами более просто.

Эти методы работают именно с HTML-атрибутами как они есть в документе. Фактически, они изменяют код страницы. Поэтому для них справедливо:

Значения атрибутов — это всегда строки.
Имя атрибута можно указывать в любом регистре, так как HTML не предъявляет требований к регистру символов в коде.

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

В DOM-интерфейсе понятия HTML-атрибутов и DOM-свойств элементов тесно связаны. При создании модели страницы для каждого элемента создаются одноимённые с атрибутами свойства и присваиваются им те же значения. Однако, это справедливо не для всех атрибутов. Например: Для атрибута class соотвествует свойство className, а для атрибута data- — свойство dataset

Для атрибута «булевого» типа (hidden, autofocus, checked, disabled, multiple, readonly, required) создаётся одноимённое свойство также «булевого» типа, то есть со значением true или false . Но в HTML-коде эти атрибуты вообще могут не иметь значений.

Многие элементы HTML имеют только базовый набор атрибутов: id , class , style и title , а также языковые атрибуты lang и dir . Модель DOM обеспечивает доступ к ним с помощью свойств id, className, style, title , lang и dir.

Стили

Вместе с атрибутами здесь необходимо рассмотреть свойства элемента style и cssText, а также метод getComputedStyle объекта window и управление встроенными стилями с помощью свойства document.styleSheets.

attributes

Свойство attributes возвращает коллекцию атрибутов указанного узла, в качестве объекта NamedNodeMap .

Узлы могут быть доступны с помощью индексов, а индекс начинается с 0.

Синтаксис

Примеры

В качестве примера, рассмотрим элемент р и его атрибуты:

classList

Свойство classList содержит список (псевдомассив) классов элемента.

Синтаксис

Описание, комментарии

Для работы с этим массивом можно воспользоваться циклом или встроенными методами:

element.classList.add (class1, class2. )	Добавляет один или несколько имен классов элемента. Если указанный класс уже существует, не будет добавлен
element.classList.remove (class1, class2. )	Удаляет один или несколько имен классов из элемента.
element.classList.contains (class)	Проверяет, имеется ли класс ( true ) или нет ( false )
element.classList.toggle (class)	Добавляет класс, если его нет, или удаляет его, если он уже есть

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


8,0	10,0	3,6	5,1	11,5

Примеры

className

Свойство className устанавливает или возвращает значение аттрибута class

Синтаксис

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

Строка, представляющая класс, или разделенный пробелами список классов, элемента

Данное свойство удобно использовать, если элементу присвоен только один класс. Но если их несколько, то с этим свойством работать сложнее. Для таких случаев в DOM введено ещё одно свойство для работы с классами — classList.

Примеры

cssText

Свойство cssText позволяет задать CSS стили массово одной строкой. При этом все содержимое атрибута style перезаписывается.

Синтаксис

Примеры

В этом примере у элемента изначально уже будут стили в атрибуте style , но свойство cssText перезапишет его:

Чтобы предыдущие стили не перезаписывались, можно сделать так:

Свойство dir позволяет установить или узнать направления текста в элементе.

Синтаксис

ltr — направление текста слева направо.
rtl — направление текста справа налево.

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

Строка, содержащая тип направления текста.

Пример

getAttribute()

Метод getAttribute возвращает значение атрибута, указанного в качестве параметра. Если данного атрибута у элемента нет, то данный метод возвращает пустую строку или null .

Синтаксис

Параметры

Примеры

getComputedStyle()

Метод getComputedStyle позволяет получить значение любого CSS свойства элемента, даже из CSS файла.

Синтаксис

Параметры

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

Возвращается коллекция (только для чтения) всех CSS-свойств элемента.

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


Да	9,0	Да	Да	Да

В IE8- нет getComputedStyle, но у элементов есть свойство currentStyle , которое возвращает вычисленное значение: уже с учётом CSS-каскада, но не всегда в окончательном формате.

Чтобы код работал и в старых и новых браузерах, обычно пишут кросс-браузерный код, наподобие такого:

Если вы откроете такой документ в IE8-, то размеры будут в процентах, а в современных браузерах – в пикселях.

Примеры

getNamedItem()

Метод getNamedItem возвращает узел атрибута с указанным именем из объекта NamedNodeMap .

Синтаксис

Параметры

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

Объект Узел, представляющий узел атрибута с указанным именем.

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


Да	9,0	Да	Да	Да

Примеры

hasAttribute()

Метод hasAtrribute возвращает true , если указанный атрибут существует у элемента. В противном случае данный метод возвращает false . Данный метод имеет один обязательный параметр — это строка, содержащая имя атрибута, который Вы хотите проверить на существование у элемента.

Синтаксис

Параметры

Примеры

hasAttributes()

Метод hasAttributes возвращает true если указанный узел имеет атрибуты. В противном случае данный метод возвращает false . Если указанный узел не является элементом, то данный метод всегда возвращает значение false . Метод hasAttributes не имеет параметров.

Синтаксис

Примеры

Определить имеет ли элемент с атрибуты:

hidden

Свойство hidden позволяет получить или изменить атрибут hidden

Синтаксис

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


Да	11,0	Да	Да	Да

Технически, атрибут hidden работает так же, как style=»display:none» . Но его проще поставить через JavaScript (меньше букв), и могут быть преимущества для скринридеров и прочих нестандартных браузеров.

Пример

Свойство id позволяет установить или узнать идентификатор элемента (значение атрибута id элемента).

Синтаксис

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

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

Строка, содержащая идентификатор элемента

Метод item возвращает узел атрибута по указанному индексу в NamedNodeMap .

Синтаксис

Параметры

Примеры

length

Свойство length возвращает количество узлов атрибутов в NamedNodeMap .

Синтаксис

Примеры

removeAttribute()

Метод removeAttribute удаляет указанный атрибут у элемента. Данный метод имеет один обязательный параметр — это строка, содержащая имя атрибута, который Вы хотите удалить у элемента. Данный метод в качестве результата ничего не возвращает.

Синтаксис

Параметры

Примеры

removeNamedItem()

Метод removeNamedItem удаляет узел с указанным именем в объекте NamedNodeMap .

Синтаксис

Параметры

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

Объект Узел, представляющий removed узел атрибута

В Internet Explorer 8 и выше, метод возвращает атрибут , как и должно быть, но это не снимает атрибут.

setAttribute()

Метод setAttribute добавляет указанный атрибут к элементу и присваивает ему указанное значение. Если указанный атрибут у элемента уже есть, то данный метод изменяет только его значение.

Синтаксис

Параметры

Примеры

setNamedItem()

Метод setNamedItem добавляет указанный узел к NamedNodeMap .

Синтаксис

Параметры

Примеры

style

Свойство element.style возвращает объект, который дает доступ к стилю элемента на чтение и запись.

С его помощью можно изменять большинство CSS-свойств, например element.style.width=»100px» работает так, как будто у элемента в атрибуте прописано style=»width:100px» .

Для свойств, названия которых состоят из нескольких слов, используется вотТакаяЗапись:
В старом стандарте JavaScript слово «float» было зарезервировано и недоступно для использования в качестве свойства объекта. Поэтому используется не element.style.float , а element.style.cssFloat .

Чтобы сбросить поставленный стиль, присваивают в style пустую строку: element.style.width=»» .

При сбросе свойства style стиль будет взят из CSS.

Например, для того, чтобы спрятать элемент, можно присвоить: element.style.display = «none» .

А вот чтобы показать его обратно – не обязательно явно указывать другой display , наподобие element.style.display = «block» . Можно просто снять поставленный стиль: element.style.display = «» .

Стиль в style находится в формате браузера, а не в том, в котором его присвоили, Например:

Обратите внимание на то, как браузер «распаковал» свойство style.margin , предоставив для чтения style.marginTop . То же самое произойдет и для border , background и т.д.

Свойство style является специальным объектом, ему нельзя присваивать строку.

Запись element.style=»color:blue» работать не будет.

Можно попробовать использовать атрибут: element.setAttribute(«style», . ), но самым правильным и, главное, кросс-браузерным (с учётом старых IE) решением такой задачи будет использование свойства style.cssText

Свойство style содержит лишь тот стиль, который указан в атрибуте элемента, без учёта каскада CSS.

Изменение атрибутов, классов и стилей в DOM

Ранее в этой серии мануалов вы научились создавать, вставлять, заменять и удалять элементы в DOM (Document Object Model) с помощью встроенных методов.

Улучшая свои навыки управления DOM, вы можете использовать интерактивные возможности JavaScript и изменять веб-элементы.

В этом мануале вы научитесь изменять стили, классы и другие атрибуты узлов HTML-элемента. Это даст вам более полное представление о том, как управлять важными элементами внутри DOM.

Обзор выбираемых элементов

До недавнего времени чаще всего для выбора и изменения элементов в DOM использовалась популярная библиотека JavaScript, jQuery. jQuery упрощала процесс выбора одного или нескольких элементов и одновременно применяла все изменения к ним. В мануале Доступ к элементам в DOM мы рассмотрели методы DOM для захвата и работы с узлами в простейшем JavaScript.

Как вы помните, методы document.querySelector() и document.getElementById() используются для доступа к единому элементу. Используя div с атрибутом id (как показано ниже), можно также получить доступ к этому элементу.

Метод querySelector() более надежный, поскольку он может выбирать элемент на странице по любому типу селектора.

// Both methods will return a single element
const demoId = document.querySelector(‘#demo-id’);

Получив доступ к одному элементу, можно легко обновить часть элемента, такую как текст внутри.

// Change the text of one element
demoId.textContent = ‘Demo ID text updated.’;

Однако при доступе к нескольким элементам с помощью общего селектора, конкретного класса, нужно итерировать все элементы в списке. В приведенном ниже коде есть два элемента div с общим значением класса.

<div >Demo Class 1</div>
<div >Demo Class 2</div>

Используйте querySelectorAll(), чтобы захватить все элементы с применяемым к ним классом demo-class, и forEach(), чтобы перебрать их и применить изменения. Также можно получить доступ к определенному элементу с помощью querySelectorAll() так же, как и в работе с массивом, через скобки.

// Get a NodeList of all .demo elements
const demoClasses = document.querySelectorAll(‘.demo-class’);
// Change the text of multiple elements with a loop
demoClasses.forEach(element => <
element.textContent = ‘All demo classes updated.’;
>);
// Access the first element in the NodeList
demoClasses[0];

Это одно из самых важных различий, которое следует учитывать при переходе от jQuery к JavaScript. Многие примеры изменения элементов не объясняют процесс применения этих методов и свойств к нескольким элементам.

Свойства и методы в этой статье часто присоединяются к прослушивателям событий, чтобы реагировать на клики, зависания или другие триггеры.

Примечание: Методы getElementsByClassName() и getElementsByTagName() возвращают коллекции HTML, не имеющие доступа к методу forEach(), который есть у querySelectorAll(). В этих случаях вам нужно будет использовать стандартный цикл for для итерации по коллекции.

Изменение атрибутов

Атрибуты – это значения, содержащие дополнительную информацию об элементах HTML. Обычно они входят в пары имя-значение и в зависимости от элемента могут быть неотъемлемыми.

Некоторые из наиболее распространенных атрибутов HTML – это атрибут src тега img, href тега а, class, id и style. Найти полный список атрибутов HTML можно в Mozilla Developer Network. Пользовательские элементы, которые не являются частью стандарта HTML, получат префикс data-.

В JavaScript есть четыре метода изменения атрибутов элемента:

Метод	Описание	Пример
hasAttribute()	Возвращает логическое значение true или false.	element.hasAttribute(‘href’);
getAttribute()	Возвращает значение указанного атрибута или null.	element.getAttribute(‘href’);
setAttribute()	Добавляет или обновляет значение указанного атрибута.	element.setAttribute(‘href’, ‘index.html’);
removeAttribute()	Удаляет атрибут из элемента.	element.removeAttribute(‘href’);

Создайте новый HTML-файл с тегом img с одним атрибутом. Вы можете использовать любое локальное изображение, если работаете оффлайн.

Загрузите этот файл HTML в современный браузер и откройте встроенную консоль разработчика. Вы увидите загруженное вами изображение.

Теперь проверьте работу методов атрибутов на ходу.

// Assign image element
const img = document.querySelector(‘img’);
img.hasAttribute(‘src’); // returns true
img.getAttribute(‘src’); // returns «. shark.png»
img.removeAttribute(‘src’); // remove the src attribute and value

На этом этапе вы удаляете атрибут src и значение, связанное с img, но вы можете сбросить этот атрибут и присвоить значение другого изображения с помощью img.setAttribute ():

Теперь можно изменить атрибут напрямую, присвоив новое значение атрибуту как свойство элемента и установив в src прежнее значение, my-image.png

Методы hasAttribute() и getAttribute() обычно используются с условными операторами, а методы setAttribute() и removeAttribute() используются для непосредственного изменения DOM.

Изменение классов

Атрибут class соответствует селекторам по классу CSS. Не путайте это с классами ES6, особым типом функции JavaScript.

Классы CSS используются для применения стилей к нескольким элементам, в отличие от ID, которые могут встречаться на странице только один раз. В JavaScript для работы с атрибутом класса есть свойства className и classList.

Метод/свойство	Описание	Пример
className	Возвращает или задает значение класса	element.className;
classList.add()	Добавляет одно или несколько значений класса	element.classList.add(‘active’);
classList.toggle()	Включает или отключает класс	element.classList.toggle(‘active’);
classList.contains()	Проверяет, существует ли значение класса	element.classList.contains(‘active’);
classList.replace()	Заменяет существующее значение класса новым значением	element.classList.replace(‘old’, ‘new’);
classList.remove()	Удаляет значение класса	element.classList.remove(‘active’);

Создайте другой файл HTML для работы с методами класса; в нем будет два элемента и несколько классов.

<!DOCTYPE html>
<html lang=»en»>
<style>
body <
max-width: 600px;
margin: 0 auto;
font-family: sans-serif;
>
.active <
border: 2px solid blue;
>
.warning <
border: 2px solid red;
>
.hidden <
display: none;
>
div <
border: 2px dashed lightgray;
padding: 15px;
margin: 5px;
>
</style>
<body>
<div>Div 1</div>
<div >Div 2</div>
</body>
</html>

Откройте файл classes.html в веб-браузере и просмотрите страницу.

Свойство className было введено для предотвращения конфликтов с ключевым словом class, которое встречается в JavaScript и других языках, имеющих доступ к DOM. Вы можете использовать className для присваивания значения непосредственно классу.

// Select the first div
const div = document.querySelector(‘div’);
// Assign the warning class to the first div
div.className = ‘warning’;

Вы присвоили класс warning , определенный в значениях CSS classes.html, первому div.Проверьте страницу в браузере.

Обратите внимание, что если какие-либо классы уже существуют в элементе, это переопределит их. Вы можете добавить несколько разделенных пробелами классов, используя свойство className, или использовать его без операторов присваивания, чтобы получить значение класса в элементе.

Другой способ изменения классов – это свойство classList, которое содержит несколько полезных методов. Эти методы аналогичны методам jQuery addClass, removeClass и toggleClass.

// Select the second div by class name
const activeDiv = document.querySelector(‘.active’);
activeDiv.classList.add(‘hidden’); // Add the hidden class
activeDiv.classList.remove(‘hidden’); // Remove the hidden class
activeDiv.classList.toggle(‘hidden’); // Switch between hidden true and false
activeDiv.classList.replace(‘active’, ‘warning’); // Replace active class with warning class

После применения этих методов веб-страница должна измениться. Проверьте ее в веб-браузере.

В отличие от className, classList.add() добавит новый класс в список существующих классов. Вы также можете добавить несколько классов в виде разделенных запятыми строк. Также для изменения класса элемента можно использовать setAttribute.

Изменение стилей

Свойство style представляет собой встроенные стили HTML-элемента. Часто стили применяются к элементам через таблицу стилей (как мы делали это ранее в этой статье), но иногда приходится добавлять или редактировать встроенный стиль напрямую.

Давайте рассмотрим краткий пример редактирования стилей с помощью JavaScript. Ниже представлен новый HTML-файл с div, который имеет некоторые встроенные стили, необходимые для отображения квадрата.

Откройте браузер и просмотрите в нем файл styles.html. В левом верхнем углу будет квадрат.

Стили редактируются с помощью опции setAttribute().

// Select div
const div = document.querySelector(‘div’);
// Apply style to div
div.setAttribute(‘style’, ‘text-align: center’);

Однако это удалит все существующие встроенные стили элемента. Поскольку этого чаще всего делать не стоит, лучше непосредственно использовать атрибут style.

div.style.height = ‘100px’;
div.style.width = ‘100px’;
div.style.border = ‘2px solid black’;

Свойства CSS написаны в кебаб-корпусе, который является строчными словами, разделенными тире. Важно отметить, что свойства CSS в кебаб-регистре нельзя использовать в свойстве стиля JavaScript. Вместо этого они будут заменены их эквивалентом – верблюжьим регистром (первое слово состоит из строчных букв, а все последующие слова начинаются с заглавной без пробелов). Другими словами, для свойства стиля JavaScript вместо text-align нужно использовать textAlign.

// Make div into a circle and vertically center the text
div.style.borderRadius = ‘50%’;
div.style.display = ‘flex’;
div.style.justifyContent = ‘center’;
div.style.alignItems = ‘center’;

После вышеупомянутых изменений стиля ваш окончательный рендеринг styles.html покажет круг.

Если к элементу нужно применить много стилистических изменений, лучше применить стиль к классу и добавить новый класс.

Заключение

HTML-элементы часто содержат дополнительную информацию, присваиваемую им в виде атрибутов. Атрибуты могут состоять из пар имя/значение. Некоторые из наиболее распространенных атрибутов – это class и style.

В этом мануале вы узнали, как обращаться, изменять и удалять атрибуты в HTML-элементе в DOM, используя простой JavaScript. Вы также научились добавлять, удалять, переключаться и заменять классы CSS элементами и редактировать встроенные стили CSS. Чтобы узнать больше, ознакомьтесь с документацией по атрибутам в Mozilla Developer Network.

Как удалить атрибут js

Как удалить атрибут элемента при помощи JS?

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript jquery или задайте свой вопрос.

Атрибуты и стили

Свойство attributes

Методы элемента для работы с его атрибутами

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

Стили

attributes

Синтаксис

Комментарии

Примеры

classList

Синтаксис

Описание, комментарии

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

Примеры

className

Синтаксис

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

Примеры

cssText

Синтаксис

Комментарии

Примеры

Синтаксис

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

Пример

getAttribute()

Синтаксис

Параметры

Примеры

getComputedStyle()

Синтаксис

Параметры

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

Комментарии

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

Примеры

getNamedItem()

Синтаксис

Параметры

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

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

Примеры

hasAttribute()

Синтаксис

Параметры

Примеры

hasAttributes()

Синтаксис

Примеры

hidden

Синтаксис

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

Комментарии

Пример

Синтаксис

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

Синтаксис

Параметры

Примеры

length

Синтаксис

Примеры

removeAttribute()

Синтаксис

Параметры

Примеры

removeNamedItem()

Синтаксис

Параметры

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

setAttribute()

Синтаксис

Параметры

Примеры

setNamedItem()

Синтаксис

Параметры