Метод removeAttribute
Метод removeAttribute удаляет заданный атрибут у какого-либо тега.
Синтаксис
элемент.removeAttribute(имя атрибута);
Пример
Давайте для элемента удалим атрибут value :
let elem = document.querySelector(‘#elem’); elem.removeAttribute(‘value’);
HTML код станет выглядеть так (исчезнет атрибут value):
Смотрите также
- метод getAttribute ,
который получает атрибуты - метод setAttribute ,
который записывает атрибуты - метод hasAttribute ,
который проверяет атрибуты
Как удалить data атрибут?
Пытаюсь с помощью data атрибутов сделать preloader. Прелоадер у меня не скрывается. Почему?
Добавлено через 22 часа 58 минут
Попробовал просто изменить css data атрибута. Эффект тот же — результата нет, в отладчике ошибок нет. Я начинаю думать что дело вовсе не в js, а я где-то накосячил в html или в css.
document.getElementById('main').dataset.preloader.style.background = '#999999';
Добавлено через 10 минут
Действительно. Дело было в css. Изменил на :
[data-preloader] {. }
Но, кое что не устраивает. Был изначальный код (не дата атрибут):
$('#preloader').delay(350).fadeOut('slow');
И при исчезании получался некий спад. Называется вроде fade in/out. Как тоже самое сделать здесь? Я думал
transition: all 0.45s ease-in-out;
поможет, но увы, никакой плавной анимации нет.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Вывод изображения через атрибут data-*
День добрый, уважаемые. С javascript знаком очень поверхностно, встала такая задача: есть.
Определение пути через атрибут data
Всем привет.Кто может подсказать как добавить значения с помощью data атрибута?дело в том что есть.
Как создать пользовательский атрибут data-*
Вот такой код /*создаем загловки*/ function createTh() < .
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Добавить всем изображениям атрибут data-*
Ребятки нужна помощь. Нужно всем изображениям поста добавить атрибут data-social, т.е. из такого.
Не могу поменять атрибут div блока data-percent
есть блок: div data-dimension="200" data-text="75%".
Удалить атрибут
Добрый вечер. Много чего перепробовал, но не вышло удалить атрибут с инпута. Нужно при нажатии на.
Удалить атрибут href
Здравствуйте форумчане! Помогите разобраться в чём моя ошибка: нужно удалить атрибут href всех <a>.
.dataset
Простейший способ хранить данные в HTML и читать их из JavaScript.
Время чтения: 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Как пишется
- Использование camelCase и kebab-case
- Удаление дата-атрибута
- Егор Огарков советует
Обновлено 28 ноября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство dataset позволяет считывать или устанавливать любые дата-атрибуты на HTML-элементе.
Дата-атрибут — это пользовательский атрибут на элементе, название которого начинается с data — , например data — testid . Дата атрибуты используются, чтобы хранить значения на элементах в HTML.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Обращение к свойству dataset вернёт объект со всеми дата-атрибутами, которые есть на элементе. Названиями полей в объекте будут имена дата-атрибутов после префикса data — . Например, если атрибут называется data — columns , то поле в объекте для этого атрибута будет называться columns .
const items = document.querySelectorAll('li') const firstItem = items[0] console.log(firstItem.dataset)//const items = document.querySelectorAll('li') const firstItem = items[0] console.log(firstItem.dataset) //Если дата-атрибутов на элементе нет, то вернётся пустой объект:
const heading = document.querySelector('h1') console.log(heading.dataset)// <>const heading = document.querySelector('h1') console.log(heading.dataset) // <>Чтобы добавить дата-атрибут к элементу, нужно добавить новое поле в объект dataset . Название поля так же должно быть без префикса data — , браузер автоматически подставит его. В значениях атрибутов в HTML могут быть только строки, потому любое значение будет автоматически приведено к строке.
Возьмём тот же HTML из примера выше и добавим дата-атрибуты ко второму элементу:
const items = document.querySelectorAll('li') const secondItem = items[1] secondItem.dataset.side = 'evil'secondItem.dataset.age = 46secondItem.dataset.lightsaber =const items = document.querySelectorAll('li') const secondItem = items[1] secondItem.dataset.side = 'evil' secondItem.dataset.age = 46 secondItem.dataset.lightsaber = color: 'red' >В результате получим такой элемент:
data-id="9434" data-episode="4" data-side="evil" data-age="46" data-lightsaber="[object Object]"> Дарт Вейдерli data-id="9434" data-episode="4" data-side="evil" data-age="46" data-lightsaber="[object Object]"> Дарт Вейдер li>Все не строковые значения установленные в dataset будут приводиться к строке. Поэтому объект превращается в [object Object ] , а число 46 превращается в строку «46» .
Если в dataset добавить поле с пустым значением, то в HTML будет создан дата-атрибут без значения.
Использование camelCase и kebab-case
Скопировать ссылку «Использование camelCase и kebab-case» Скопировано
В dataset необходимо присваивать поля, название которых записывается в одно слово. Потому для составных имён используется только camel Case нотация. При попытке присвоить название в kebab — case будет выброшена ошибка.
const body = document.querySelector('body') body.dataset['dark-theme'] = true // Uncaught DOMException: Failed to set// a named property on 'DOMStringMap':// 'dark-theme' is not a valid property name.const body = document.querySelector('body') body.dataset['dark-theme'] = true // Uncaught DOMException: Failed to set // a named property on 'DOMStringMap': // 'dark-theme' is not a valid property name.Дата-атрибуты, записанные в dataset с помощью camel Case , в HTML будут иметь названия в kebab — case . Браузер преобразует camel Case в kebab — case :
const item = document.querySelector('li') item.dataset.yearsOfExperience = 2item.dataset.candidateRole = 'junior'const item = document.querySelector('li') item.dataset.yearsOfExperience = 2 item.dataset.candidateRole = 'junior'После выполнения кода выше получится следующий HTML:
Преобразование названий работает и в обратную сторону – дата-атрибут на HTML-элементе, записанный в kebab — case , будет превращён в dataset в camel Case .
const item = document.querySelector('li') console.log(item.dataset)//const item = document.querySelector('li') console.log(item.dataset) //Удаление дата-атрибута
Скопировать ссылку «Удаление дата-атрибута» Скопировано
Удалить дата-атрибут можно только с помощью оператора delete . Если попытаться присвоить к полю значение undefined или null , то браузер просто присвоит атрибуту строку ‘undefined’ или ‘null’ .
Возьмём следующий HTML:
Любое содержимоеdiv data-testid="test">Любое содержимоеdiv>При установке undefined в значение дата-атрибута, он не удалится с элемента.
const element = document.querySelector('div') element.dataset.testid = undefinedconst element = document.querySelector('div') element.dataset.testid = undefinedВ результате получится следующий HTML:
Любое содержимоеdiv data-testid="undefined">Любое содержимоеdiv>Если использовать оператор delete , то получим элемент без дата-атрибута.
delete element.dataset.testiddelete element.dataset.testidЛюбое содержимоеdiv>Любое содержимоеdiv>Свойство dataset защищено от перезаписи. Это значит что попытка присвоить в dataset новое значение будет проигнорирована.
const element = document.querySelector('div') // Ничего не произойдёт, дата-атрибуты на элементах тоже не изменятсяelement.dataset = <>element.dataset = 'string'const element = document.querySelector('div') // Ничего не произойдёт, дата-атрибуты на элементах тоже не изменятся element.dataset = > element.dataset = 'string'Как понять
Скопировать ссылку «Как понять» Скопировано
Дата-атрибуты появились в HTML5 и добавили возможность разработчикам добавлять свои собственные атрибуты к элементам. Причин для использования таких атрибутов можно придумать множество, чаще всего в дата-атрибутах хранят нужные значения, которые используют в CSS или JavaScript.
Дата-атрибуты были созданы специально для того, чтобы хранить и работать с данными прямо в HTML. Отсюда и префикс data, что в переводе значит данные. Например, с помощью дата-атрибутов можно хранить значение выбранное в селекте прямо на элементе.
Хранение данных на HTML-элементах так же полезно для инициализации виджетов в JavaScript. Они могут находить нужные элементы используя дата-атрибут как селектор, и читать данные из атрибута. Например, в многостраничных приложениях HTML генерируется на сервере и готовая страница отправляется в ответ на запрос. Во время генерации в HTML можно подставить дата-атрибуты с данными с сервера, и таким образом пробросить их в JavaScript.
В теории для такой же цели можно использовать и обычный идентификатор id , но цель у этого атрибута совсем другая. Плюс спецификация требует чтобы значение атрибута id было уникальным на всем странице.
Дата-атрибутов на элементе может быть сколько угодно, потому удобно располагать отдельные кусочки данных в свой атрибут. Такого точно нельзя достичь, используя только идентификатор.
Браузер даёт возможность управлять дата-атрибутами через специальное API dataset .
На практике
Скопировать ссылку «На практике» Скопировано
Егор Огарков советует
Скопировать ссылку «Егор Огарков советует» Скопировано
�� Дата-атрибут можно использовать для применения стилей. Элементы можно выделять CSS-селектора по атрибуту:
[data-id] /* Селектор для всех элементов с data-id */> [data-id="123"] /* Селектор только для элементов с data-id="123" */>[data-id] /* Селектор для всех элементов с data-id */ > [data-id="123"] /* Селектор только для элементов с data-id="123" */ >Найти элемент с data — id = «123» :
const element = document.querySelector('[data-id="123"]')const element = document.querySelector('[data-id="123"]')�� Некоторые фреймворки во время компиляции самостоятельно генерируют дата-атрибуты и присваивают их к элементам, чтобы делать изоляцию CSS.
�� Дата-атрибуты широко используются в автоматизированном тестировании. Для этого на необходимых элементах расставляют дата-атрибуты и тест обращается к ним. В документациях к различным библиотекам для тестирования часто можно встретить атрибут data — testid .
Как удалить атрибут элемента при помощи JS?
На сколько помнится у данного тега есть только 2 аттрибута: media и type — которые не обязательные, аттрибут scope отсутствует. Это только mozilla — поддерживает.
16 апр 2018 в 14:40
Да вот мне или убрать, вообще скриптом или заменить на type=»text/css»
16 апр 2018 в 14:41Просто написать
16 апр 2018 в 14:44
просто написать да
16 апр 2018 в 14:51
Но ведь клиент не умеет менять на сервере, по этому у вас всегда будет то, что на сервере, а не то, что сделал клиент без участия сервера.
16 апр 2018 в 15:34
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
styleTag.removeAttribute('scope'); console.log(styleTag.outerHTML);Отслеживать
ответ дан 16 апр 2018 в 14:18
13.1k 2 2 золотых знака 25 25 серебряных знаков 56 56 бронзовых знаков
А если нет id? просто на всей странице
16 апр 2018 в 14:20
@razmenyairu document.querySelectorAll(‘style’)
16 апр 2018 в 14:24
просто находит все стили, а мне нужно просто удалить на всей странице scope=»scope», чтоб стало
16 апр 2018 в 14:28
@razmenyairu боюсь с таким подходом вам не сюда, а на fl.ru
16 апр 2018 в 14:30scope=»scope» — аттрибут элемента. Чтобы удалить все аттрибуты, не нужен jQuery:
while (elem.attributes.length > 0) elem.removeAttribute(elem.attributes[0].name);Чтобы проитерироваться по всем элементам документа:
var all = document.getElementsByTagName("*"); for (var i=0, max=all.length; i < max; i++) < // ваши действия >$(document.documentElement).children().each(function(index, element) < // ваши действия >);var all = document.getElementsByTagName("*"); for (var i=0, max=all.length; i < max; i++) < var elem = all[i]; while (elem.attributes.length >0) elem.removeAttribute("scope"); >Как отмечено в комментариях, можно и сразу выбрать только нужные элементы (только те, что содержат нужный аттрибут)
$("[scope]").each(function(index, element) < element.removeAttribute("scope"); >);