Setel atribut tanpa nilai

194

Bagaimana cara menetapkan atribut data tanpa menambahkan nilai dalam jQuery? Saya ingin ini:

<body data-body>

Saya mencoba:

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

Segala sesuatu yang lain tampaknya menambahkan argumen kedua sebagai string. Apakah mungkin untuk hanya menetapkan atribut tanpa nilai?

javascript jquery attributes attr David Hellsing
sumber
3
Mengapa Anda perlu data-bodyvs data-body=""?
Pil Ledakan
Setidaknya jika Anda ingin menggunakan XHTML, Anda tidak boleh melakukan itu karena minimisasi atribut tidak diperbolehkan.
Matthias
9
Saya tidak menggunakan XHTML, saya menggunakan HTML5
David Hellsing
2
@ user1689607 karena saya menyimpan HTML yang dihasilkan sebagai string dan perlu melakukan pencarian balik nanti.
David Hellsing
4
@ExplosionPills Salah satu contoh adalah requiredatribut untuk validasi formulir HTML5. Saya yakin ada banyak kasus penggunaan lain yang valid.
Zero3

Jawaban:

250

The attr()Fungsi juga merupakan fungsi setter. Anda bisa memberikannya string kosong.

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

String kosong hanya akan membuat atribut tanpa nilai.

<body data-body>

Referensi - http://api.jquery.com/attr/#attr-attributeName-value

attr (atributName, nilai)

Lix
sumber
24
+1, tapi OP tahu itu setter. Fakta bahwa mengoper string kosong berfungsi tetapi nulltidak mengejutkan.
Jon
2
Javasctipt memiliki beberapa perilaku aneh . Mengetahui di mana keanehan ini terjadi akan menghilangkan unsur surprize: P
Lix
25
Catatan: Ini tidak berfungsi dengan jQuery 1.7.2 (saya tahu itu bukan versi terbaru) tetapi menggunakan $(el).prop('data-body', true)berfungsi untuk saya di mana $(el).attr('data-body', '')akhirnya pengaturan data-body = "data-body" untuk saya.
Patrick O'Doherty
6
@ PatrickO'Doherty $(el).prop('data-body', true)tidak bekerja untuk saya. attr()tidak berfungsi tetapi juga menambahkan string kosong sebagai nilai atribut yang ingin saya tambahkan.
Webdevotion
1
@ Andrew saya yakin Anda sedang mencari fungsi removeAttr / prop . Itu tergantung atribut mana yang Anda coba hapus.
Lix
47

Mungkin mencoba:

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");
Callum McLean
sumber
2
Hanya solusi ini yang bekerja untuk sayavar btn = $(this).get(0); btn.setAttribute("disabled","");
gkiko
1
Setelah bermain-main dengan .attr dan .prop, seperti yang disarankan dalam semua solusi dan komentar lain di sini, saya akhirnya menemukan bahwa kembali (atau setidaknya "setengah jalan" kembali) ke JS asli, melakukan trik, seperti yang disarankan dalam komentar di atas ... Bersorak untuk itu!
TheCuBeMan
22

The jawaban yang diterima tidak membuat atribut nama-satunya lagi (per September 2017).

Anda harus menggunakan metode JQuery prop () untuk membuat atribut hanya nama.

$(body).prop('data-body', true)
Charlie
sumber
Sebenarnya, saya tampaknya menambahkan "value = 'true'" ke opsi pilih saya, bukan hanya "nilai". Ugh.
RonLugge
saya bertanya-tanya bagaimana jawaban yang diterima tidak mengandung solusi ini! itu cara terbersih menggunakan jquery.
denen
Sayangnya tidak bekerja di opsi tarik turun yang dipilih, di Chrome
MC9000
7

Anda dapat melakukannya tanpa jQuery!

Contoh:

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

Untuk mengatur nilai atribut Boolean, seperti dinonaktifkan, Anda dapat menentukan nilai apa pun. String kosong atau nama atribut adalah nilai yang disarankan. Yang penting adalah bahwa jika atribut hadir sama sekali, terlepas dari nilai aktualnya, nilainya dianggap benar. Tidak adanya atribut berarti nilainya salah. Dengan mengatur nilai atribut yang dinonaktifkan ke string kosong (""), kami menyetel dinonaktifkan ke true, yang mengakibatkan tombol dinonaktifkan.

Dari MDN Element.setAttribute ()

LipESprY
sumber
1
jQuery terlalu flakey dalam hal ini. Paling baik dilakukan di javascript agar Anda tidak membuat diri Anda gila setiap kali jquery atau browser berubah. Ini berlaku untuk semua kerangka kerja klien kereta ini.
MC9000
1

Tidak yakin apakah ini benar-benar bermanfaat atau mengapa saya lebih suka gaya ini tetapi yang saya lakukan (dalam vanilla js) adalah:

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

Ini akan menambahkan atribut di semua huruf kecil tanpa nilai atau menghapusnya jika sudah ada pada elemen.

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

Brent N.
sumber