Як змінити атрибут заголовка елемента за допомогою jQuery


226

У мене є елемент введення форми і хочу змінити його атрибут заголовка. Це повинно бути просто, як пиріг, але я чомусь не можу знайти, як це зробити. Як це робиться, і де і як слід шукати, як це зробити?

Відповіді:


463

Перш ніж писати будь-який код, давайте обговоримо різницю між атрибутами та властивостями. Атрибути - це налаштування, які ви застосовуєте до елементів у розмітці HTML ; Потім браузер аналізує розмітку і створює DOM-об'єкти різних типів, які містять властивості, ініціалізовані зі значеннями атрибутів. На об'єктах DOM, таких як простий HTMLElement, ви майже завжди хочете працювати з його властивостями , а не з колекцією атрибутів .

Поточна найкраща практика полягає у тому, щоб уникати роботи з атрибутами, якщо вони не є спеціальними або немає еквівалентного властивості, яке б доповнило її. Оскільки titleдійсно існує властивість читання / запису на багатьох HTMLElements, ми повинні цим скористатися.

Детальніше про різницю між атрибутами та властивостями ви можете прочитати тут або тут .

Маючи це на увазі, давайте маніпулювати цим title...

Отримати або встановити titleвластивість елемента без jQuery

Оскільки titleце загальнодоступна власність, ви можете встановити його на будь-якому елементі DOM, який підтримує його за допомогою простого JavaScript:

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

Вилучення майже однакове; тут нічого особливого:

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

Це буде найшвидший спосіб зміни заголовка, якщо ви оптимізатор, але оскільки ви хотіли, щоб jQuery включав:

Отримати або встановити title властивість елемента за допомогою jQuery (v1.6 +)

jQuery представив новий метод у v1.6 для отримання та встановлення властивостей. Щоб встановити titleвластивість на елемент, використовуйте:

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

Якщо ви хочете отримати заголовок, опустіть другий параметр і зафіксуйте повернене значення:

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

Перегляньте prop()документацію API для jQuery.

Якщо ви дійсно не хочете використовувати властивості, або ви використовуєте версію jQuery до версії 1.6, тоді слід прочитати далі:

Отримати або встановити title атрибут елемента за допомогою jQuery (версії <1.6)

Ви можете змінити title атрибут за допомогою наступного коду:

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

Або отримати його за допомогою:

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

Перегляньте attr()документацію API для jQuery.


5
Якщо це не добре побудована відповідь, жодна з них не є. І це так само точно, як і добре побудовано. +1 ... (о, а також ваше ім'я дивовижне, бо воно моє :) навіть написано те саме!)
VoidKing

@VoidKing: Я схильний переглядати та робити актуальні відповіді, які стають популярними (яких у мене є лише кілька). Я намагаюся надати все, на що я б сподівався знайти, якби досліджував або розміщував питання. Я радий, що ти знайшов його!
Cᴏʀʏ

@ Cory Добре, якщо чесно, бо я шукав щось інше (це був дальний постріл, але шукав, чи є який-небудь спосіб оформити поле заголовок HTML за замовчуванням). Я не знайшов того, що шукав, але дуже захоплювався зусиллями, які ви доклали до цієї відповіді (ви показали ресурси, чисті .js та jQuery тощо). У будь-якому випадку, приємна відповідь!
VoidKing

@VoidKing: Це, мабуть, неправильне місце для відповіді, але якщо ви говорите про типові підказки, що з’являються під час наведення курсорів на елементи з атрибутами alt або title, можливо, ця відповідь дасть вам деяке розуміння.
Cᴏʀʏ

@Cory Дякую, сер!
VoidKing

31

У модальних діалогах jquery ui вам потрібно використовувати цю конструкцію:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );

3
Рятувальник !! Під час використання відповіді, проголосованої вище, заголовок змінюється один раз, після чого заголовок не змінюється після цього, ВІДПОВІДНО ви використовуєте параметр заголовка в діалоговому вікні !! ДЯКУЄМО SOOOOOOO МНОГО!
Райан Елліс

Я радий, що я прочитав коментарі ;-) Якщо вам потрібно змінити заголовок кілька разів, вам доведеться встановити його в діалоговому вікні.
Мішель

Ніколи б не подумав, що це буде прийнято так багато разів. Я дуже радий, що це допомогло :-)
Ігор Л.

15

Я вірю

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

або

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

повинен зробити трюк ...

Я думаю, що ви можете знайти всі основні функції в jQuery Docs , хоча я ненавиджу форматування.


7

Іншим варіантом, якщо ви віддаєте перевагу, було б отримати елемент DOM від об’єкта jQuery і використовувати на ньому стандартні DOM-аксесоари:

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

"Спосіб jQuery", як згадують інші, полягає у використанні методу attr (). Дивіться документацію API для attr () тут .


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

за першою назвою:

jqueryTitle('destroy');

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


Цю проблему можна вирішити, використовуючи саму бібліотеку jquery. Вам слід посилатися на використання сторонніх бібліотек лише тоді, коли це згадує ОП, або це неможливо виконати без використання сторонньої бібліотеки.
Авішек

Так, але є й інші особливості. Просте, але приємне рішення ... Ви можете вивчити ...
Ерді Ерташ

не було б транспортних витрат на сторонній бібліотеці, чого можна уникнути, використовуючи фондові / рідні методи.
Авішек

Плюс, вже є широко прийнята відповідь, яка є більш ефективною.
Авішек

2

Якщо ви створюєте divта намагаєтесь додати його titleдо нього.

Спробуйте

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

0

Як додаток до відповіді @ Cᴏʀʏ, переконайтесь, що заголовок підказки вже не встановлено вручну в елементі HTML. У моєму випадку клас span для підказки вже мав фіксований текст, тому моя функція JQuery $('[data-toggle="tooltip"]').prop('title', 'your new title');не працювала.

Коли я видалив атрибут заголовка в класі span HTML, jQuery працював.

Так:

<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>

Потрібно:

<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>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.