JS властивість CSSStyleDeclaration.cursor

Загальний опис

element.style.cursor – це властивість, яка встановлює або повертає тип курсора миші, який буде відображатися при наведенні на елемент. Ця властивість дозволяє налаштувати зовнішній вигляд курсора, забезпечуючи кращу взаємодію користувача з веб-сторінкою.

Властивість cursor може мати різні значення, такі як default, pointer, move, text, wait, crosshair, not-allowed, а також багато інших. Крім стандартних значень, можна використовувати URL-адресу для встановлення користувацького зображення курсора. Це забезпечує велику гнучкість у дизайні та інтерфейсі користувача.

Щоб змінити тип курсора для конкретного елемента за допомогою JavaScript, спочатку потрібно отримати посилання на цей елемент, а потім встановити властивість cursor через об'єкт style.

Приклад: встановлення курсора у вигляді руки при наведенні.

let element = document.getElementById('myElement');
element.style.cursor = 'pointer';

Приклад: встановлення стандартного курсора.

let element = document.getElementById('myElement');
element.style.cursor = 'default';

Приклад: встановлення курсора у вигляді текстового курсора (часто використовується для текстових полів).

let element = document.getElementById('myTextField');
element.style.cursor = 'text';

Приклад: встановлення курсора у вигляді годинника (для індикації очікування).

let element = document.getElementById('myButton');
element.style.cursor = 'wait';

Для використання користувацького зображення як курсора, можна задати URL-адресу зображення. Зображення повинно бути маленьким і відповідати стандартам курсорів.

Приклад: встановлення користувацького курсора.

let element = document.getElementById('myElement');
element.style.cursor = 'url(myCursor.png), auto';

У цьому прикладі, якщо зображення myCursor.png не завантажується, курсор повернеться до значення auto.

Практичні застосування

Використання різних курсорів може значно покращити взаємодію користувача з веб-сторінкою. Наприклад, курсор у вигляді руки (pointer) зазвичай використовується для посилань або кнопок, що інтуїтивно зрозуміло для користувача.

Приклад: встановлення курсора для посилання.

let link = document.querySelector('a');
link.style.cursor = 'pointer';

Використання курсора move часто доцільно для елементів, які можна перетягувати.

let draggable = document.getElementById('draggable');
draggable.style.cursor = 'move';

Додаткові поради

При зміні курсора важливо забезпечити, щоб зміни були зрозумілими та очікуваними для користувача. Надмірне використання нестандартних курсорів може заплутати користувачів, тому завжди враховуйте контекст використання та загальний дизайн сторінки.

Наприклад, зміна курсора на not-allowed може сигналізувати про неактивний стан елемента.

let disabledButton = document.getElementById('disabledButton');
disabledButton.style.cursor = 'not-allowed';

Властивість element.style.cursor є потужним інструментом для покращення користувацького досвіду, коли використовується розумно та в межах очікувань користувача.

Синтаксис

element.style.cursor

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Створюємо новий елемент <div>
const newDiv = document.createElement('div');
newDiv.innerText = 'Наведіть на мене курсор';
newDiv.style.width = '200px';
newDiv.style.height = '100px';
newDiv.style.backgroundColor = 'lightblue';
newDiv.style.textAlign = 'center';
newDiv.style.lineHeight = '100px';
newDiv.style.border = '1px solid black';

// Додаємо обробник події наведення курсора
newDiv.addEventListener('mouseover', function() {
    newDiv.style.cursor = 'pointer';
});

// Додаємо обробник події зняття наведення курсора
newDiv.addEventListener('mouseout', function() {
    newDiv.style.cursor = 'default';
});

// Додаємо елемент до тіла документу
document.body.appendChild(newDiv);

// Знаходимо елемент кнопки
const button = document.querySelector('#loadDataButton');

// Додаємо обробник події натискання на кнопку
button.addEventListener('click', async function() {
    // Змінюємо курсор на "progress" (годинник або коло, що крутиться)
    document.body.style.cursor = 'progress';
    
    try {
        // Імітуємо асинхронний запит
        await new Promise(resolve => setTimeout(resolve, 3000));
        // Після завершення операції, змінюємо курсор назад на "default"
        document.body.style.cursor = 'default';
        alert('Дані завантажено!');
    } catch (error) {
        // У разі помилки, змінюємо курсор назад на "default"
        document.body.style.cursor = 'default';
        console.error('Помилка завантаження даних', error);
    }
});