我如何以编程方式同时将超过 1 种样式应用于单个节点

Question

我正在用 JavaFX 创建一个计算器。我有一个带有 fx:ID #labelResult 的标签，样式为 css。现在我在主窗格中添加了键盘监听器。因此，当我按下 Left/Right 箭头键时，我将 #labelResult 的背景颜色更改为字符串 bgColors 数组中的颜色。我还添加了一项功能，可在按下 Upper/Down 箭头键时更改标签字体大小。现在的问题是。看来我不能同时应用这两种效果。因此，当我更改标签的背景颜色并触发更改字体大小机制时，字体大小效果将应用于标签，同时 bg 颜色效果会重置。我怎样才能同时应用这两种效果？

P.S : I used the setStyle method to apply the style in both cases in my controller.

 CSS (before applying styles in my controller)

#labelRESULT {  
-fx-background-color: rgba(59, 74, 107, 0.8);
-fx-font-size: 45px;
-fx-text-fill: #fff;
}

Controller.java

@FXML
private Label labelRESULT;

@FXML
private void handleKeys(KeyEvent event) {
    int size = 45;
    String keyPressed = event.getCode().toString().toUpperCase();
    switch (keyPressed) {
        case "RIGHT":
            labelRESULT.setStyle("-fx-bg-color: #" + bgColors[1]);
            break;
        case "UP":
            labelRESULT.setStyle("-fx-font-size: " + (size + 2) + "px;");
            break;
    }
}

发生的事情的图片：http://imgh.us/javafx-calc.png

1- before applying styles programatically

2- after changing bg color of the label

3- after changing font size of the label while bg color is changed

Answer 1

您可以 add/switch css-类到您的节点。

JavaFXUtils.addClasses(node, "my-class-for-font");
JavaFXUtils.removeClasses(node, "my-class-for-color");

Answer 2

如果您将 getStyle() 的结果（即 bgColor）与附加样式（即 fontSize）连接起来，然后再次使用 setStyle()，也许会有帮助？

编辑这将是另一种选择（在正确的位置将标志设置为 true 或 false）：

labelRESULT.pseudoClassStateChanged(PseudoClass.getPseudoClass("left-right-pressed"), flag);


labelRESULT.pseudoClassStateChanged(PseudoClass.getPseudoClass("up-down-pressed"), flag);

并在 css:

中定义自定义伪 class

:left-right-pressed {
    -fx-background-color: yellow;
}

:up-down-pressed {
    -fx-font-size: 14;
}

我如何以编程方式同时将超过 1 种样式应用于单个节点

How can i apply more than 1 style to a single node at the same time programmatically

css

java

javafx

javafx-2

javafx-8