изменение специфичных для браузера свойств CSS3 (префикса) в JavaScript - PullRequest
Новая
       0

изменение специфичных для браузера свойств CSS3 (префикса) в JavaScript

3 голосов
/ 02 февраля 2012

Итак, я пытаюсь динамически изменить стиль div с помощью javascript, что обычно не составляет большого труда, за исключением того, что я пытаюсь изменить некоторые свойства CSS3, которые имеют префикс, то есть минус (-) в имени.... и, конечно же, это означает что-то еще полностью в javascript ...

, поэтому у меня это происходит в моем javascript: 

r += 1;
document.getElementById('someDiv').style.transform = "rotate(" + r + "deg)";

и свойство стиля моего div выглядитthis: 

transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(50deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */

, чтобы javascript прекрасно работал для изменения свойства "transform", но как бы я изменил остальные?потому что выполнение чего-то подобного не будет работать: 

document.getElementById('someDiv').style.-ms-transform = "rotate(" + r + "deg)";

, потому что JavaScript читает "-" как синтаксическую ошибку: (

мысли?

Ответы [ 4 ]

6 голосов
/ 02 февраля 2012

Вместо - введите следующую заглавную букву: style.MozTransform.
(так же, как style.backgroundColor)

Обратите внимание, что IE неправильно использует msTransform со строчными буквами m.

2 голосов
/ 02 февраля 2012

Используйте jquery и просто меняйте классы 

 $("p").removeClass("myClass noClass").addClass("yourClass");
2 голосов
/ 02 февраля 2012

В javascript вы можете получить доступ к свойству объекта двумя способами: с точечной нотацией или с массивом.В частности, когда у вас есть специальные символы в имени свойства, используйте обозначение массива: 

document.getElementById('someDiv').style['-ms-transform'] = "rotate(" + r + "deg)";

Затем вам нужно убедиться, что свойство подходит для браузера, я настоятельно рекомендую вам использовать JavaScript-библиотеку, такую ​​как jQuery., Mootools и т. Д., Если вы хотите выиграть какое-то время и предотвратить разочарование, которое испытывали веб-разработчики до этих замечательных инструментов ...

1 голос
/ 02 февраля 2012

Если у вас уже есть стиль inline , вы можете игнорировать префикс и изменять градусы. Style.cssText элемента доступен для чтения и записи. 

var sty=document.getElementById('someDiv').style;

sty.cssText= sty.cssText.replace(/rotate\([^)]+/,'rotate(30');
...