如何通过javascript滑块实时更改CSS颜色值？

Question

我正在创建一个页面，用户可以在其中获得一个从0到100的javascript滑块，并可以使用它来设置页面上div的不透明度。

我希望该div的不透明度能够在滑块工作时实时更改。我以前没有这样做过。什么是最好的方法？

滑块中的光标会在移动时显示滑块的当前值。似乎我只需要找到一种在页面上任意其他位置显示该值的方法，这样我就可以在div的样式设置中显示它。

生成滑块的.js文件有一行（我认为）正在设置光标中的当前值：

$(this).children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));

要让这个更改的数字同时显示在其他地方，我是否只需要在某处添加div然后添加这样的一行？

$("#newDivId").children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));

这似乎会让我看到div中显示的数字。然后我怎么把它变成一个我可以放入div的样式设置的形式？

如果这是一个php变量，我会做这样的事情，

style="opacity:<?php print $value ?>;"

.js的等价物是什么？

Answer 1

jQuery UI文档有一个colorpicker with the slider widget的示例。你应该能够理解它并使其适应不透明度。

以下是一个使用颜色选择器示例作为基础拼凑在一起的工作示例：http://jsfiddle.net/6VgzT/