Установить атрибут без значения

194

Как установить атрибут данных без добавления значения в jQuery? Я хочу этот:

<body data-body>

Я попытался:

$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything

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

javascript jquery attributes attr Дэвид Хеллсинг
источник
3
Зачем тебе data-bodyпротив data-body=""?
Таблетки взрыва
По крайней мере, если вы хотите использовать XHTML, вы не должны этого делать, поскольку минимизация атрибутов не допускается.
Матиас
9
Я не использую XHTML, я использую HTML5
Дэвид Хеллсинг
2
@ user1689607, потому что я сохраняю сгенерированный HTML-файл как строку, и позже мне потребуется выполнить обратный поиск.
Дэвид Хеллсинг
4
@ExplosionPills Одним из примеров является requiredатрибут для проверки формы HTML5. Я уверен, что есть много других допустимых вариантов использования.
Zero3

Ответы:

252

Эта attr()функция также является установочной функцией. Вы можете просто передать ему пустую строку.

$('body').attr('data-body','');

Пустая строка просто создаст атрибут без значения.

<body data-body>

Ссылка - http://api.jquery.com/attr/#attr-attributeName-value

attr (attributeName, значение)

Lix
источник
24
+1, но ОП знает, что это сеттер. Тот факт, что передача пустой строки работает, но nullне работает, несколько удивляет.
Джон
2
У Javasctipt есть странное поведение . Знание того, где происходят эти странности, уберет элемент сюрприза: P
Lix
25
Примечание: это не работает с jQuery 1.7.2 (я знаю, что это не последняя версия), но использование $(el).prop('data-body', true)сработало для меня, где в $(el).attr('data-body', '')итоге я установил data-body = "data-body" для меня.
Патрик О'Доэрти
6
@ PatrickO'Doherty $(el).prop('data-body', true)не работает для меня. attr()работает, но также добавляет пустую строку в качестве значения атрибута, который я хочу добавить.
Webdevotion
1
@ Andrew Я полагаю, что вы ищете функции removeAttr / prop . Это зависит от того, какой атрибут вы пытаетесь удалить.
Lix
47

Возможно, попробуйте:

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");
Каллум Маклин
источник
2
У меня var btn = $(this).get(0); btn.setAttribute("disabled","");
работало
1
Поработав с .attr и .prop, как это было предложено во всех других решениях и комментариях здесь, я наконец-то обнаружил, что возвращение (или, по крайней мере, «на полпути») к нативному JS сделало трюк, как предложено в комментарий выше ... Ура за это!
TheCuBeMan
body.setAttribute("data-body","");это установит «ложное» значение моего атрибута, как я могу установить «» (пустое) значение атрибута?
Арчана Шарма
22

Общепринятый ответ не создать атрибут имя только больше (по состоянию на сентябрь 2017 года).

Вы должны использовать метод JQuery prop () для создания атрибутов только для имени.

$(body).prop('data-body', true)
Чарли
источник
На самом деле, я, кажется, добавляю «value = 'true'" к моей опции выбора, а не просто "value". Тьфу.
RonLugge
Мне было интересно, как принятый ответ не содержал этого решения! это самый чистый способ использования jquery.
Денн
Не работает в некоторых выпадающих меню, к сожалению, в Chrome
MC9000
7

Вы можете сделать это без JQuery!

Пример:

document.querySelector('button').setAttribute('disabled', '');
<button>My disabled button!</button>
Развернуть фрагмент

Чтобы установить значение логического атрибута, такого как отключенный, вы можете указать любое значение. Пустая строка или имя атрибута являются рекомендуемыми значениями. Все, что имеет значение, это то, что если атрибут присутствует вообще, независимо от его фактического значения, его значение считается истинным. Отсутствие атрибута означает, что его значение равно false. Устанавливая значение атрибута disabled в пустую строку (""), мы устанавливаем для disabled значение true, что приводит к отключению кнопки.

От MDN Element.setAttribute ()

LipESprY
источник
1
JQuery слишком ненадежен в этом отношении. Лучше всего делать в javascript, чтобы не сводить себя с ума каждый раз, когда меняются jquery или браузеры. Это относится ко всем этим ошибочным клиентским фреймворкам.
MC9000
1

Не уверен, что это действительно полезно или почему я предпочитаю этот стиль, но я делаю (в vanilla js):

document.querySelector('#selector').toggleAttribute('data-something');

Это добавит атрибут в нижнем регистре без значения или удалит его, если он уже существует в элементе.

https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

Брент Н.
источник