jquery - 在元素 CSS 更改时将其实时更改？

Question

不知道该标题如何用词，但我想知道如何将元素样式更改与事件（例如滑块）联系起来以显示正在发生的效果......

示例 1：如果我有一个滑块来更改 a 的不透明度div，我将如何 1）创建一个从 0 开始到 1 结束的关于元素不透明度的滑块，以及 2）观察滑块的位置并更改元素的不透明度因为它被来回拖动？

示例 2：如果我有一个颜色图来设置元素的背景颜色，我将如何 1) 获取光标所在颜色的十六进制，以及 2) 观察光标在颜色图上的移动并实时更改元素在地图上移动时的颜色？

Answer 1

使用 Javascript/JQuery，您可以将函数绑定到事件。例如，您可以使用JQuery 滑块并简单地将函数绑定到其change事件并让函数修改元素的不透明度，如下所示：

$("sliderElement").slider({
    change: function(event, ui){
        $("opacityElement").css('opacity', ui.value);
    }
}

每当您更改元素的 CSS 样式时，浏览器都会重新绘制它。因此，只要您需要更改外观，只需使用 javascript 更改其样式属性即可。