Cara mengubah atribut judul elemen menggunakan jQuery

226

Saya memiliki elemen input formulir dan ingin mengubah atribut judulnya. Ini harus semudah pie, tetapi untuk beberapa alasan saya tidak dapat menemukan cara melakukan ini. Bagaimana ini dilakukan, dan di mana dan bagaimana saya harus mencari cara untuk melakukan ini?

jquery forms attributes Brian
sumber

Jawaban:

463

Sebelum kita menulis kode apa pun, mari kita bahas perbedaan antara atribut dan properti. Atribut adalah pengaturan yang Anda terapkan ke elemen dalam markup HTML Anda ; browser kemudian mem-parsing markup dan membuat objek DOM dari berbagai jenis yang berisi properti diinisialisasi dengan nilai-nilai atribut. Pada objek DOM, seperti sederhana HTMLElement, Anda hampir selalu ingin bekerja dengan propertinya , bukan koleksi atributnya .

Praktik terbaik saat ini adalah untuk menghindari bekerja dengan atribut kecuali itu adalah kebiasaan atau tidak ada properti yang setara untuk menambahnya. Sejak titlememang ada sebagai read / write properti pada banyak HTMLElement, kami harus mengambil keuntungan dari itu.

Anda dapat membaca lebih lanjut tentang perbedaan antara atribut dan properti di sini atau di sini .

Dengan mengingat hal ini, mari kita memanipulasi itu title...

Dapatkan atau Setel titleproperti elemen tanpa jQuery

Karena titleini adalah properti publik, Anda dapat mengaturnya pada elemen DOM yang mendukungnya dengan JavaScript biasa:

document.getElementById('yourElementId').title = 'your new title';

Pengambilan hampir identik; tidak ada yang istimewa di sini:

var elementTitle = document.getElementById('yourElementId').title;

Ini akan menjadi cara tercepat untuk mengubah judul jika Anda orang yang optimis, tetapi karena Anda ingin jQuery terlibat:

Dapatkan atau Setel title properti elemen dengan jQuery (v1.6 +)

jQuery memperkenalkan metode baru di v1.6 untuk mendapatkan dan mengatur properti. Untuk mengatur titleproperti pada suatu elemen, gunakan:

$('#yourElementId').prop('title', 'your new title');

Jika Anda ingin mengambil judul, hapus parameter kedua dan ambil nilai kembali:

var elementTitle = $('#yourElementId').prop('title');

Lihat prop()dokumentasi API untuk jQuery.

Jika Anda benar-benar - tidak ingin menggunakan properti, atau Anda menggunakan versi jQuery sebelum v1.6, maka Anda harus membaca terus:

Dapatkan atau Setel title atribut elemen dengan jQuery (versi <1.6)

Anda dapat mengubah title atribut dengan kode berikut:

$('#yourElementId').attr('title', 'your new title');

Atau ambil dengan:

var elementTitle = $('#yourElementId').attr('title');

Lihat attr()dokumentasi API untuk jQuery.

Cᴏʀʏ
sumber
5
Jika ini bukan jawaban yang dibangun dengan baik, tidak ada jawaban. DAN itu seakurat dibangun dengan baik. +1 ... (oh, dan namamu juga luar biasa, karena namaku :) bahkan dieja sama!)
VoidKing
@VoidKing: Saya cenderung mengunjungi kembali dan membuat jawaban saat ini yang menjadi populer (yang saya hanya punya beberapa). Saya mencoba memberikan segala sesuatu yang saya harap akan temukan jika saya meneliti atau memposting pertanyaan. Saya senang Anda menemukannya!
C
@Cory Yah, sejujurnya karena saya sedang mencari sesuatu yang lain (itu adalah pukulan panjang, tetapi sedang mencari apakah ada cara untuk gaya kotak judul HTML default). Saya tidak menemukan apa yang saya cari, tetapi sangat mengagumi upaya yang Anda berikan dalam jawaban ini (Anda menunjukkan sumber daya, .js dan jQuery murni, dll.). Bagaimanapun, jawaban yang bagus!
Voiding
@VoidKing: Ini mungkin tempat yang salah untuk menjawab, tetapi jika Anda berbicara tentang tooltips default yang muncul ketika Anda mengarahkan kursor ke item dengan atribut alt atau title, maka mungkin jawaban ini akan memberi Anda beberapa wawasan.
Cᴏʀʏ
@Cory Terima kasih, Tuan!
Voiding
31

Dalam dialog modal jquery ui Anda perlu menggunakan konstruk ini:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );
Igor L.
sumber
3
Penyelamat !! Saat menggunakan jawaban yang dipilih di atas, judul diubah satu kali, maka judul tidak berubah setelahnya KECUALI Anda menggunakan opsi judul dalam dialog !! TERIMA KASIH SOOOOOOO BANYAK!
Ryan Ellis
Saya senang saya membaca komentar ;-) Jika Anda perlu mengubah judul beberapa kali, Anda harus mengaturnya di opsi dialog.
Michel
Tidak pernah menyangka ini akan diterima berkali-kali. Saya sangat senang itu membantu :-)
Igor L.
15

Saya percaya

$("#myElement").attr("title", "new title value")

atau 

$("#myElement").prop("title", "new title value")

harus melakukan trik ...

Saya pikir Anda dapat menemukan semua fungsi inti di jQuery Docs , meskipun saya benci formatnya.

womp
sumber
7

Opsi lain, jika Anda mau, adalah untuk mendapatkan elemen DOM dari objek jQuery dan menggunakan pengakses DOM standar di atasnya:

$("#myElement")[0].title = "new title value";

"Cara jQuery", sebagaimana disebutkan oleh orang lain, adalah menggunakan metode attr (). Lihat dokumentasi API untuk attr () di sini .

Greg Campbell
sumber
2 
jqueryTitle({
    title: 'New Title'
});

untuk judul pertama:

jqueryTitle('destroy');

https://github.com/ertaserdi/jQuery-Title

Erdi Ertaş
sumber
Masalah ini dapat diatasi dengan menggunakan perpustakaan jquery itu sendiri. Anda hanya boleh merujuk menggunakan pustaka pihak ketiga saat OP menyebutkannya, atau pustaka itu tidak dapat dicapai tanpa menggunakan pustaka pihak ketiga.
Avishek
Ya, tetapi ada fitur lainnya. Solusi sederhana namun bagus ... Anda dapat memeriksa ...
Erdi Ertaş
akan ada overhead transportasi http dari perpustakaan pihak ke-3, yang dapat dihindari menggunakan metode stok / asli.
Avishek
ditambah, sudah ada jawaban yang diterima secara luas yang lebih efisien.
Avishek
2

Jika Anda membuat divdan mencoba menambahkannya title.

Mencoba

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');
R Singh
sumber
0

Sebagai tambahan jawaban @ Cᴏʀʏ, pastikan judul tooltip belum diatur secara manual di elemen HTML. Dalam kasus saya, kelas span untuk tooltip sudah memiliki teks judul tetap, karena ini fungsi JQuery saya $('[data-toggle="tooltip"]').prop('title', 'your new title');tidak berfungsi.

Ketika saya menghapus atribut judul di kelas rentang HTML, jQuery berfungsi.

Begitu: 

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>

Harus becode:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>
Nicolas
sumber