我如何以编程方式同时在单个节点上应用不止一种样式

Question

I am creating a calculator in JavaFX. I have a label with fx:ID #labelResult , styled with css. Now i added keyboard listener to the main pane. So that when i press Left/Right arrow key i change the background color of the #labelResult to a color from a string bgColors array. I also added a functionality to change the labels font size when Upper/Down arrow keys pressed. Now problem is. It seems that i can't have both effects applied at the same time. So when i have the label's background color changed and i trigger the change font size mechanism the font size effect gets applied to the label while the bg color effect resets. How can i have both effects applied at the same time?

PS : 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;
    }
}

Image of what happens: 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

You can just add/switch css-classes to your nodes.

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

Answer 2

Maybe it helps if you concat the result of getStyle() (ie bgColor) with the additional style (ie fontSize) and then use setStyle() again?

EDIT this would be another option (set the flag to true or false at the correct place):

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


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

and define a custom pseudo class in your css:

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

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