2013-08-21 3 views
1

У меня есть элемент IMG c. Следующие работы, чтобы изменить его курсор (в Chrome):Установить несколько значений курсора в javascript

c.style.cursor='-webkit-zoom-out'; 

Но если я пытаюсь добавить совместимость для других браузеров, как и в дальнейшем, он ломает:

c.style.cursor='-webkit-zoom-out, -moz-zoom-out'; 

(и я гавань» t даже получил попытку связать .cur для IE-совместимости ....) Какой правильный синтаксис для добавления нескольких значений в элемент стиля?

+0

Вам нужно сделать это с помощью javascript? Это стиль CSS3, поэтому вы ориентируетесь на современные браузеры. Я не знаю вашего варианта использования, но вы можете применить его с CSS и получить желаемый эффект. –

+0

Вы должны установить курсор через CSS, переключить класс или атрибут и позволить CSS обрабатывать стили. – zzzzBov

ответ

3

Вы должны добавить их отдельно:

c.style.cursor = '-webkit-zoom-out'; 
c.style.cursor = '-moz-zoom-out'; 

К сожалению zoom-in и zoom-out не поддерживаются Internet Explorer еще. См. MDN Cursor: Browser compatibility.

Demo

Try before buy

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

+0

Weird - so '=' в javascript иногда фактически '+ ='? Как можно сказать, когда и как можно очистить свойство с этой характеристикой (поскольку предположительно '.cursor = '';' не удалят предыдущие значения)? – feetwet

+2

На самом деле это не конкатентно. Он работает так же, как если бы это было правило CSS. Браузер выбирает значение, которое может обрабатывать, и отбрасывает любой другой. Если вы проверите элемент в демо, вы увидите, что только '-webkit' или' -moz' применяется как встроенный стиль. Точно так же, как правило CSS, это будет: 'img {cursor: -webkit-zoom-out; cursor: -moz-zoom-out; } 'вместо' img {cursor: -webkit-zoom-out, -moz-zoom-out; } '. Смотрите это [демо] (http://jsfiddle.net/cV3VN/). – insertusernamehere

+0

Спасибо! Вот часть рабочего примера (XSLT, но идея такая же):

Смежные вопросы