Обновление CSS через простой JavaScript... как обновить, если свойство использует префиксы поставщика?

например, если мне нужен значок захвата для моего курсора, в CSS я бы использовал это:

div {
     cursor: -moz-grabbing;
     cursor: -webkit-grabbing;
     cursor: grabbing;
    }

но, скажем, я хочу реализовать это через JavaScript, но все еще могу охватить все три, как мне это сделать? Я просто назначаю их в трех строках - является ли JavaScript резервным для предыдущего назначения?

document.getElementById('theDiv').style.cursor = '-webkit-grabbing';
document.getElementById('theDiv').style.cursor = '-moz-grabbing';
document.getElementById('theDiv').style.cursor = 'grabbing';
7
css javascript vendor-prefix

3 ответов

1) Вы можете добавить класс для этой цели, который присваивает все свойства.

2) Если вы попробуете это по-своему, Javascript переназначит свойство 3 раза и в конечном итоге последний будет выполнен как активный, поэтому

    document.getElementById('theDiv').style.cursor = '-webkit-grabbing';
    document.getElementById('theDiv').style.cursor = '-moz-grabbing';
    document.getElementById('theDiv').style.cursor = 'grabbing';

не будет работать.

3) Добавление класса сделает это. например:

    css:-
    .myClass {
      cursor: -moz-grabbing; 
      cursor: -webkit-grabbing; 
      cursor: grabbing; 
     }

и

   js:-

   document.getElementById('theDiv').className += 'myClass';
11

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

вы хотите определить, какой браузер вы используете с javascript, а затем применить соответствующий.

в конце дня ваш JS выполняется на конкретной машине пользователя с определенным браузером, поэтому, обнаружив браузер и применив соответствующий стиль для этого браузера, вы решаете свою проблему.

Pesudo Код:

if(isMozilla) {
    document.getElementById('theDiv').style.cursor = '-moz-grabbing';
}
else if(isChrome OR isSafari) {
    document.getElementById('theDiv').style.cursor = '-webkit-grabbing';
}
else {
    document.getElementById('theDiv').style.cursor = 'grabbing';
}
2

вероятно, хорошо знать в этом отношении: Если вы пытаетесь установить недопустимое значение, браузер проигнорирует его. Так что как это работает:

function setStyle(element, property, value) {
    var prefix = ['', '-webkit-', '-moz-'];
    var i = 0;
    var style = element.style;
    do {
        style[property] = prefix[i] + value;
        i += 1;
    }
    while(style[property] !== prefix[i] + value && i < prefix.length);
}
1