Изменение курсора JavaScript (и изменение обратно)

Question

У меня есть эта страница, которая делает несколько прикольных вещей из базы данных, обработка которых занимает пару секунд, и в то же время я хотел бы установить курсор "wait", чтобы пользователь не вылетал и продолжал нажимать кнопку.Я смотрел на вещь

document.body.style.cursor = "wait"

, проблема в том, что она работает только тогда, когда мышь находится над телом страницы (т.е. все еще показывает нормальный указатель, если оннад кнопкой).Как я могу настроить его так, чтобы независимо от того, где находится мышь на странице, на ней отображался значок ожидания?

Вторая часть этого вопроса: как только все будет готово, как мне установить его обратно?Если я установлю его обратно на "default", это, кажется, переопределит любые "hover" изменения курсора, которые я установил в своем CSS (таким образом, он больше не становится рукой, когда над указанным объектом и т. Д.).

РЕДАКТИРОВАТЬ: первый ответ работает хорошо, за исключением того, что в IE он не обновляет курсор (таким образом, вы замечаете изменение типа курсора), пока вы фактически не переместите курсор.Какие-нибудь исправления?

Answer 1

Я предлагаю две вещи: а) Лучше написать CSS вроде

body.waiting * { cursor: wait; }

б) Используйте JS для обработки класса тела

/* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; // could be empty or whatever you want

Возможно, вы захотите добавить класс вместо замены целого атрибута класса, поэтому я предлагаю использовать для этого что-то вроде jQuery.

РЕДАКТИРОВАТЬ 2019: не используйте jQuery только для этого, используйте classList

Answer 2

Стили должны обрабатываться с помощью CSS, как указано W3C.com :

CSS - это язык для описания представления веб-страниц, включая цвета, макет,и шрифты.... Отделение HTML от CSS облегчает поддержку сайтов, совместное использование таблиц стилей на разных страницах и адаптацию страниц к различным средам.Это называется отделением структуры (или: содержимого) от представления.

Как предложено Томом Роджерро, добавьте строку в ваш файл CSS:

body.waiting * { cursor: wait; }

Однаковаш сценарий не должен перезаписывать весь список имен классов.Том предложил устанавливать имена классов через jQuery, но в этом случае jQuery не нужен.Простой Javascript может сделать это.

Чтобы добавить имя класса «ожидание» в тело документа:

document.body.classList.add('waiting');

Чтобы удалить имя класса «ожидание» из тела документа:

document.body.classList.remove('waiting');

Answer 3

Для первой проблемы попробуйте использовать cursor: wait !important;.

Для вашей второй проблемы, курсором по умолчанию для элементов является cursor: auto;, а не cursor: default; или cursor: inherit;.

Answer 4

Не ответ на вопрос, а способ достижения желаемого.

Сделайте div (см. Класс ниже) видимым при загрузке.

• гарантирует, что ни один элемент не доступен, а затемненный дисплей указывает на это.

• Вы можете добавить анимированный GIF, чтобы указать, что что-то происходит вместо курсора.

  .loading{ position:fixed; height:100%; width:100%; left:0; top:0; cursor:wait; background:#000; opacity:.5; z-index:999}

Answer 5

Любые элементы, которые не наследуют курсор по умолчанию (например, кнопки), должны установить курсор на наследование:

someButton.style.cursor = 'inherit';

Чтобы вернуться к значению по умолчанию для элемента (и не прерывать такие вещи, как :hover с помощью принудительного курсора), установите для него пустую строку:

document.body.style.cursor = '';

Answer 6

Если вы довольны использованием JQuery, то для быстрого решения этой проблемы используйте:

$('*').css('cursor','wait')

Я не знаю, насколько это элегантно, но у меня это сработало,

Answer 7

Я перепробовал все, но в конце концов этот jquery сработал, особенно если вы хотите подождать, когда курсор над всеми элементами, включая кнопки и ссылки.

определить в верхней части углового файла .ts

declare var $: any;

и затем, когда вы хотите, подождите, курсор:

$('*').css('cursor','wait');

и удалите ожидание:

$('*').css('cursor','auto');