如何使用供應商前綴修改jquery的jquery？

Question

我想改變一個jQuery UI的滑塊，與供應商前綴的背景CSS。我正在使用線性漸變。我最需要所有瀏覽器的支持。我已經在css樣式表中設置了一些帶有供應商前綴的css，並且我想通過javascript更改漸變。我需要的CSS這個前綴5

• -webkit-
• -moz-
• -O-
• -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

您已經展示瞭如何通過jQuery修改CSS，例如代碼：

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

你會使用相同的語法，只是提供CSS屬性作爲第一個參數和值作爲第二。例如：

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