0

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

  • -webkit-
  • -moz-
  • -o-
  • -小姐-

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

       }
    });
});
4

1 回答 1

0

您已经有显示如何通过 jQuery 修改 CSS 的代码，例如：

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

您将使用相同的语法，只需将 CSS 属性作为第一个参数，将值作为第二个参数。例如：

 $(".slidevalue").css('-webkit-border-radius', "5px");
于 2016-03-14T07:04:18.077 回答