Aktualizowanie CSS za pomocą zwykłego kodu JavaScript ... w jaki sposób zaktualizować, jeśli właściwość używa prefiksów dostawcy?

Question

Na przykład, jeśli chcę chwytając ikonę dla mojego kursora, w CSS chciałbym użyć tego:

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

Ale powiedzmy, że chcę, aby zaimplementować to poprzez JavaScript, ale nadal jest w stanie pokryć wszystkie trzy, jak czy to zrobię? Czy po prostu przypisuję je w trzech wierszach - czy JavaScript jest powrotem do poprzedniego przypisania?

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

Answer 1

1) Można dodać klasę do tego celu, która przypisuje wszystkie właściwości.

2) Jeśli spróbujesz go na swój sposób, a następnie, JavaScript będzie przypisanie własności 3 razy i skończyć z ostatniego wykonanego jako aktywny jeden, więc

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

nie będzie działać.

3) Dodanie klasy zrobi to. na przykład:

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

i

js:- 

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

Answer 2

Nie Javascript spowoduje ponowne przypisanie 3 razy i skończyć z ostatniego wykonanego jako aktywny jeden.

To, czego potrzebujesz, to wykrycie przeglądarki, z której korzystasz za pomocą javascript, a następnie zastosowanie odpowiedniej.

Pod koniec dnia Twój JS jest uruchamiany na komputerze użytkownika z określoną przeglądarką, więc wykrywając przeglądarkę i stosując odpowiedni styl dla tej przeglądarki, rozwiązujesz swój problem.

Kod 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'; 
} 

Answer 3

Prawdopodobnie dobrze wiedzieć, w związku z tym: Jeśli próbujesz ustawić nieprawidłową wartość, przeglądarka będzie go zignorować. Tak więc coś takiego działa:

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); 
}