Как изменить css с помощью jquery с префиксом поставщика?

Question

Я пытаюсь изменить слайдер jquery ui, css css с префиксами поставщика. Я использую линейный градиент. Мне нужна поддержка для большинства браузеров. Я установил некоторые CSS с префиксами поставщиков в CSS-таблице стилей, и я хочу изменить градиент с помощью javascript. Мне нужно CSS с этим 5 префиксов

• -webkit-
• -moz-
• -о-
• -ms-

• -khtml-

  Вот jsfiddle

  $(function() { 
      $("#range-slider1").slider({ 
       range:false, 
       min: 0, 
       max: 360, 
       value: 0, 
       slide: function(event, ui) { 
       var hue = ui.value, 
        sat = $('#range-slider2').slider('value'), 
        light = $('#range-slider3').slider('value'), 
        alpha = $('#range-slider4').slider('value'), 
        hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")", 
       satRangeW = "-webkit-linear-gradient(left, hsla(" + ui.value + ", 0%, 50%, 1),hsla(" + ui.value + ", 20%, 50%, 1),hsla(" + ui.value + ", 40%, 50%, 1),hsla(" + ui.value + ", 60%, 50%, 1),hsla(" + ui.value + ", 80%, 50%, 1),hsla(" + ui.value + ", 100%, 50%, 1))", 
       satRangeMo = "-moz-linear-gradient(left, hsla(" + ui.value + ", 0%, 50%, 1),hsla(" + ui.value + ", 20%, 50%, 1),hsla(" + ui.value + ", 40%, 50%, 1),hsla(" + ui.value + ", 60%, 50%, 1),hsla(" + ui.value + ", 80%, 50%, 1),hsla(" + ui.value + ", 100%, 50%, 1))"; 
       $("#slidevalue").text(hsla); 
       $(".slidevalue").css('background-color', hsla); 
       $("#range-slider2").css("background", satRangeW); 
  
       } 
      }); 
  
      $("#range-slider2").slider({ 
       range:false, 
       min: 0, 
       max: 100, 
       value: 100, 
       slide: function(event, ui) { 
        var hue = $('#range-slider1').slider('value'), 
         sat = ui.value, 
         light = $('#range-slider3').slider('value'), 
         alpha = $('#range-slider4').slider('value'), 
         hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")"; 
        $("#slidevalue").text(hsla); 
        $(".slidevalue").css('background-color', hsla); 
  
       } 
      }); 
      $("#range-slider3").slider({ 
       range:false, 
       min: 0, 
       max: 100, 
       value: 50, 
       slide: function(event, ui) { 
        var hue = $('#range-slider1').slider('value'), 
         sat = $('#range-slider2').slider('value'), 
         light = ui.value, 
         alpha = $('#range-slider4').slider('value'), 
         hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")"; 
        $("#slidevalue").text(hsla); 
        $(".slidevalue").css('background-color', hsla); 
  
       } 
      }); 
      $("#range-slider4").slider({ 
       range:false, 
       min: 0, 
       max: 1, 
       value: 1, 
       step: 0.01, 
       slide: function(event, ui) { 
        var hue = $('#range-slider1').slider('value'), 
         sat = $('#range-slider2').slider('value'), 
         light = $('#range-slider3').slider('value'), 
         alpha = ui.value, 
         hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")"; 
        $("#slidevalue").text(hsla); 
        $(".slidevalue").css('background-color', hsla); 
  
       } 
      }); 
  }); 
  

Answer 1

У вас уже есть код, показывающий, как изменить CSS через JQuery, например:

$(".slidevalue").css('background-color', hsla); 

Вы бы использовать этот же синтаксис, просто поставить свойство CSS в качестве первого параметра и его значение в качестве второго. Например:

$(".slidevalue").css('-webkit-border-radius', "5px");