Question

我正在尝试使用供应商前缀更改jquery ui滑块，s background 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");

如何通过jquery用供应商前缀修改css？

1 个答案: