如何通过带有供应商前缀的jquery修改css？

Question

我正在尝试使用供应商前缀更改 jquery ui 滑块的背景 css。我正在使用线性渐变。我需要对几乎所有浏览器的支持。我在 css 样式表中设置了一些带有供应商前缀的 css，我想通过 javascript 更改渐变。我需要这 5 个前缀的 css

• -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");