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?

— 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

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