Definir atributo sem valor

194

Como definir um atributo de dados sem adicionar um valor no jQuery? Eu quero isso:

<body data-body>

Eu tentei:

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

Tudo o resto parece adicionar os segundos argumentos como uma string. É possível apenas definir um atributo sem valor?

javascript jquery attributes attr David Hellsing
fonte
3
Por que você precisa data-bodyvs. data-body=""?
Pílulas de explosão
Pelo menos se você quiser usar o XHTML, não deve fazer isso, pois a minimização de atributos não é permitida.
Matthias
9
Eu não uso XHTML, eu uso HTML5
David Hellsing
2
@ user1689607 porque estou salvando o HTML gerado como uma string e preciso fazer uma pesquisa inversa mais tarde.
11308 David Hellsing #:
4
@ExplosionPills Um exemplo é o requiredatributo para validação de formulário HTML5. Tenho certeza de que existem muitos outros casos de uso válidos.
Zero3

Respostas:

250

A attr()função também é uma função setter. Você pode simplesmente passar uma string vazia.

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

Uma string vazia simplesmente criará o atributo sem valor.

<body data-body>

Referência - http://api.jquery.com/attr/#attr-attributeName-value

attr (attributeName, value)

Lix
fonte
24
+1, mas o OP sabe que é um levantador. O fato de passar uma string vazia funciona, mas nullnão é algo surpreendente.
31412 Jon
2
Javasctipt tem alguns comportamentos estranhos . Saber onde essas estranhezas acontecem eliminará o elemento surpresa: P
Lix
25
Nota: Isso não funciona com o jQuery 1.7.2 (eu sei que não é a versão mais recente), mas o uso $(el).prop('data-body', true)funcionou para mim, onde $(el).attr('data-body', '')acabou configurando data-body = "data-body" para mim.
Patrick O'Doherty 17/05
6
@ PatrickO'Doherty $(el).prop('data-body', true)não funciona para mim. attr()funciona, mas também adiciona uma cadeia vazia como valor do atributo que quero adicionar.
Webdevotion
1
@ Andrew Eu acredito que você está procurando as funções removeAttr / prop . Depende do atributo que você está tentando remover.
Lix
47

Talvez tente:

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");
Callum McLean
fonte
2
Só esta solução funcionou para mimvar btn = $(this).get(0); btn.setAttribute("disabled","");
gkiko
1
Depois de mexer com .attr e .prop, como sugerido em todas as outras soluções e comentários aqui, finalmente descobri que voltar (ou pelo menos "a meio caminho") para o JS nativo fez o truque, como sugerido no comente acima ... Felicidades por isso!
TheCuBeMan
22

A resposta aceita não cria mais um atributo somente nome (a partir de setembro de 2017).

Você deve usar o método JQuery prop () para criar atributos somente de nome.

$(body).prop('data-body', true)
Charlie
fonte
Na verdade, parece que estou adicionando "value = 'true'" à minha opção de seleção, em vez de apenas "value". Ugh.
RonLugge 27/02
Fiquei me perguntando como a resposta aceita não continha esta solução! é a maneira mais limpa de usar o jquery.
denns
Infelizmente, não funciona nas opções suspensas selecionadas, no Chrome #
MC9000
7

Você pode fazer isso sem o jQuery!

Exemplo:

document.querySelector('button').setAttribute('disabled', '');
<button>My disabled button!</button>
Expandir snippet

Para definir o valor de um atributo booleano, como desativado, você pode especificar qualquer valor. Uma sequência vazia ou o nome do atributo são valores recomendados. O que importa é que, se o atributo estiver presente, independentemente do seu valor real, ele será considerado verdadeiro. A ausência do atributo significa que seu valor é falso. Ao definir o valor do atributo desativado como a sequência vazia (""), definimos desativado como true, o que resulta na desativação do botão.

No MDN Element.setAttribute ()

LipESprY
fonte
1
O jQuery é muito ruim a esse respeito. O melhor é fazer javascript, para que você não fique louco toda vez que o jquery ou o navegador mudar. Isso vale para todas essas estruturas de clientes com erros.
MC9000
1

Não tenho certeza se isso é realmente benéfico ou por que eu prefiro esse estilo, mas o que faço (em vanilla js) é:

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

Isso adicionará o atributo em minúsculas sem um valor ou o removerá se ele já existir no elemento.

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

Brent N.
fonte