JS властивість Element.title
Загальний опис
Властивість title елемента HTML встановлює або повертає заголовок елемента, який відображається як підказка. Вона широко використовується для надання додаткової інформації або пояснень щодо елементів інтерфейсу, таких як посилання, кнопки, зображення тощо. Ця властивість корисна для покращення зручності використання веб-сторінки, забезпечуючи користувачам додаткові відомості про функціональність елементів без необхідності завантажувати додаткові сторінки.
Використання властивості title є досить простим. Для встановлення заголовка елемента потрібно просто присвоїти рядок з текстом властивості title відповідного HTML-елемента. Наприклад:
<a href="https://example.com" title="Перейти на приклад сайту">Приклад посилання</a>
У цьому випадку, коли користувач наведе курсор миші на посилання, з'явиться підказка "Перейти на приклад сайту".
Властивість title також можна встановлювати та змінювати динамічно за допомогою JavaScript. Ось простий приклад:
<button id="myButton">Натисни мене</button>
const button = document.getElementById('myButton');
button.title = 'Це кнопка, натиснувши яку ви побачите повідомлення';
Тут ми отримуємо посилання на елемент button за допомогою document.getElementById('myButton'), а потім присвоюємо рядок тексту властивості title цього елемента.
Властивість title також часто використовується для надання додаткової інформації про зображення на веб-сторінці. Наприклад:
<img src="image.jpg" alt="Опис зображення" title="Детальна інформація про зображення">
У цьому випадку, коли користувач наведе курсор на зображення, з'явиться підказка "Детальна інформація про зображення".
Крім того, властивість title може бути корисною для елементів форми, таких як поля вводу, випадаючі списки тощо, надаючи користувачам додаткові вказівки або пояснення щодо їх призначення або очікуваного вводу.
Важливо зазначити, що властивість title не призначена для відображення великих обсягів тексту, оскільки підказки зазвичай мають обмежений розмір та можуть бути обрізані або погано відображатися залежно від браузера та платформи. Тому рекомендується використовувати стислі та лаконічні описи в заголовках елементів.
Загалом, властивість title є корисним інструментом для покращення зручності використання веб-сторінок, надаючи користувачам додаткову інформацію про елементи інтерфейсу без необхідності завантажувати додаткові сторінки або відкривати додаткові вікна. Вона широко застосовується у веб-розробці для підвищення доступності та зрозумілості веб-інтерфейсів.
| Порада: | Якщо ви динамічно змінюєте вміст веб-сторінки за допомогою JavaScript, не забувайте також оновлювати значення властивості |
| Порада: | Пам'ятайте, що властивість |
| Порада: | Використовуйте властивість |
Синтаксис
Element.title Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми демонструємо використання властивості title для динамічної зміни заголовка (підказки) HTML-елемента. На сторінці є поле вводу для введення нового заголовка, кнопка "Оновити заголовок" та зображення, для якого ми будемо змінювати заголовок.
Коли користувач вводить текст у поле вводу та натискає кнопку "Оновити заголовок", викликається функція updateTitle(). Ця функція отримує посилання на поле вводу та зображення за допомогою document.getElementById(). Потім ми зчитуємо введений текст з поля вводу (titleInput.value) і присвоюємо його властивості title зображення (image.title = newTitle). Після цього ми очищаємо поле вводу (titleInput.value = '').
У цьому прикладі ми використовуємо властивість title для встановлення заголовка (підказки) для HTML-елемента button. Спочатку ми отримуємо посилання на елемент button за допомогою document.getElementById('myButton'), а потім присвоюємо рядок тексту властивості title цього елемента. Коли користувач наведе курсор миші на кнопку, з'явиться підказка "Це кнопка, натиснувши яку ви побачите повідомлення".
<button id="myButton">Натисни мене</button>
<script>
const button = document.getElementById('myButton');
button.title = 'Це кнопка, натиснувши яку ви побачите повідомлення';
<script>У цьому прикладі ми використовуємо властивість title для отримання заголовка зображення та виведення його в консоль браузера при наведенні курсора миші на зображення. Спочатку ми отримуємо посилання на елемент img за допомогою document.getElementById('myImage'). Потім ми зберігаємо значення властивості title цього елемента в змінній imageTitle, або присвоюємо рядок "Зображення без заголовка", якщо заголовок не встановлений.
Далі ми використовуємо метод addEventListener для прослуховування події mouseover (наведення курсора миші) на зображенні. Коли ця подія відбувається, ми виводимо в консоль браузера повідомлення з заголовком зображення, використовуючи змінну imageTitle.
Цей приклад демонструє, як можна отримувати та використовувати значення властивості title елемента, а також як обробляти події, пов'язані з наведенням курсора миші на елемент. Крім того, він показує, як можна перевіряти наявність значення властивості та надавати альтернативне значення у разі її відсутності.
<img src="image.jpg" alt="Опис зображення" id="myImage">
<script>
const image = document.getElementById('myImage');
const imageTitle = image.title || 'Зображення без заголовка';
image.addEventListener('mouseover', () => {
console.log(`Заголовок зображення: ${imageTitle}`);
});
<script>