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

Question

I am trying to change a jquery ui slider,s background css with vendor prefixes. I am using linear gradient. I need support for al most all browser. I have set some css with vendor prefixes in css stylesheet and I want to change gradient via javascript. I need css with this 5 prefixes

• -webkit-
• -moz-
• -o-
• -ms-

• -khtml-

  Here is 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

You already have code showing how to modify CSS via jQuery, for example:

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

You would use this same syntax, just supply the CSS property as the first parameter and the value as the second. For example:

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