Css 动态更改背景颜色

我想在OptionGroup组件的valueChange事件中更改我的Vaadin应用程序的背景色

由于我的页面上有相当多的布局，最好是更改每个水平布局和垂直布局的背景色，但是可以添加的每个新组件也应该有这种颜色

---

我怎样才能做到这一点？谢谢。

我想到了两种方法

从概念上和实现上讲，最简单的方法是使用单个组件作为背景，并为

水平布局

和

垂直布局

组件提供透明的背景。如果您认为布局过于复杂，无法实现此目的，那么您可以拥有许多基本的“背景”组件，同样，顶部的布局组件是透明的。这样做的目的是将需要更改颜色的组件减少为可管理的组件

如果这种方法不能转化为您的用例，您可以始终使用JavaScript动态选择布局组件并重新定义它们的背景。通过为所有布局组件提供一个公共CSS类（例如：

'dynamic-background'

），这可以变得更易于管理

请注意，此JavaScript依赖于JQuery，请查看有关将JQuery与Vaadin集成的更多详细信息：

JavaScript.getCurrent().execute("$('.dynamic-background').css('background-color', 'purple')");