css - 动态改变背景颜色

Question

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

由于我的页面上有相当多的布局，最好是更改每个 Horizo​​ntalLayout 和 VerticalLayout 的背景颜色，但每个可以添加的新组件也应该具有这种颜色。

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

Answer 1

想到了两种方法。

从概念上和实现上来说，最简单的方法是使用一个组件作为背景，并提供 Horizo​​ntalLayout 和 VerticalLayout 组件透明背景。如果你的布局对于这个来说太复杂了，你可以有一些基本的“背景”组件，同样，你的布局组件在顶部是透明的。这个想法是将需要更改颜色的组件减少到易于管理的程度。

如果该方法不能转化为您的用例，您始终可以使用 JavaScript 动态选择布局组件并重新定义它们的背景。通过为所有布局组件提供一个通用的 CSS 类(例如:'dynamic-background')可以使这更易于管理。

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

请注意，此 JavaScript 依赖于 JQuery，请查看有关将 JQuery 与 Vaadin 集成的更多详细信息:
Add javascript/Jquery & client side code in Vaadin 7
Integrating HTML and JavaScript in Vaadin 7