通过JavaFX 8中的代码访问和更改css伪类的值

Question

是否可以访问css伪类(如.text-area *.text {} )，更重要的是通过代码更改它们的值?在这种情况下，textArea.setStyle()似乎不适用。为了描述这个问题:我试图通过点击按钮改变TextArea的文本对齐方式。我知道可以通过

.text-area *.text {
-fx-text-alignment: center;
}

但是，我如何将其绑定到按钮单击？

Answer 1

请注意，CSS选择器.text-area *.text中没有使用伪类。

所使用的选择器部件是类选择器(.text、.text-area)、通用选择器(*)和后代选择器( .text-area和*.text之间)。

但是，有多种方法可以根据代码设置对齐方式：

使用伪类

伪类可以用来区分居中TextArea和非中心类.

PseudoClass centered = PseudoClass.getPseudoClass("centered");

// activate pseudoclass
textArea.pseudoClassStateChanged(centered, true);

// deactivate pseudoclass
textArea.pseudoClassStateChanged(centered, false);

CSS

.text-area:centered .text {
    -fx-text-alignment: center;
}

类似地，可以使用类，但不太方便，因为类可以多次添加。

使用自定义CSS变量

CSS变量的值是从父节点继承的，因此可以使用它使用内联样式分配子节点的属性：

CSS

.text-area {
    /* default value of variable */
    alignment: left;
}

.text-area .text {
    /* use variable for TextArea child */
    -fx-text-alignment: alignment;
}

// overwrite variable from inline style
textArea.setStyle("alignment: center;");

使用Node查找lookupAll

这是最糟糕的选择，因为它需要像Control这样的TextArea创建它们的skin，这在布局之前是不会发生的，这意味着代码要到第一个布局通过时才能工作。

// find children matching .text and assign set the property for each one
textArea.lookupAll(".text").forEach(n -> n.setStyle("-fx-text-alignment: center;"));