腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >Javafx重置按钮css为以前的样式

问Javafx重置按钮css为以前的样式
EN

Stack Overflow用户

提问于 2017-04-24 17:37:56

回答 3查看 2.9K关注 0票数 1

注: Javafx新手

问题：

许多网站和教程展示了如何使用类或ID设置按钮的样式。

在从Id中设置样式之后，我需要将样式还原到以前的状态，或者简单地还原为.button类。

Styles:

我有以下css (摘录)用于我的所有按钮：

.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

以及所选按钮的Id：

#button-selected {
    -fx-background-color: linear-gradient(#3f6770, #82c0ce);
}

代码(提取)：

//load stylesheet from resources into scene    someScene.getStylesheets().add(Main.class.getResource("/gui.css").toExternalForm());
//...
Button b = new Button("some button");
//...
b.getStyleClass().add("button");       <----- adds .button class style to button

一些在稍后调用时触发：

(activeButton, bSelectedButton) -> {

    //...
    if (!activeButton.equals(bSelectedButton)){

        //restore activeButton to ".button" class

        bSelectedButton.setId("button-selected");
    }
    //...

}

作为上面的一个简短摘要：(将问题放到实际应用中)

触发发生，例如鼠标单击事件，调用lambda。

这将检查按钮是否为“相同的按钮”，如果不是，则：

清除前一个按钮的格式activeButton，
并使用bSelectedButton id设置新按钮的#button-selected样式。

请注意：

我试过：

.button:pressed {
    -fx-background-color: linear-gradient(#3f6770, #82c0ce);
}

但是在点击后，它不会像预期的那样改变颜色(在按钮上)

问题：

如何"unsetId“/ "removeId”来恢复按钮的前一种样式，

或者简单地说，如何从加载的样式表中设置按钮上的活动样式？

java

css

button

javafx

人脸识别特惠活动

精准实时的人脸检测、分析、识别等服务，在线、离线满足多样需求，可应用于智慧零售、智慧社区、在线娱乐等多种应用场景

回答 3

Stack Overflow用户

发布于 2017-04-24 19:52:46

使用切换按钮而不是标准按钮。

你好像在重新发明方向盘。一个可选择的按钮是一个ToggleButton，您可能应该使用它。切换按钮有一个选择psuedo状态，用于在选择按钮时配置样式。

除了-fx-背景色用法

作为一个旁白，它通常不是最好的直接设置-fx-背景颜色为控制，而是设置一个较高级别的查找颜色，如-fx-基础。有关这些颜色的定义，请参阅modena.css，以及如何使用它们的示例(以及伪状态选择器)。

关于-fx-效果用法的评论

在事物上设置阴影效果通常会导致模糊文本。由于这个原因(和其他原因)，为JavaFX控件模拟阴影3D效果的标准方法是分层背景，这有点复杂，但在JavaFX CSS参考中的文档比较少，大量的示例都在modena.css文件中。

关于css id使用的通知

元素的css id不应更改。它用于标识元素，并且在给定的文档中应该是唯一的。因此，您不应该将id设置为类似于button-selected的内容。相反，您应该使用类或伪类来维护动态样式信息的键。

通过将CSS id设置为null，您可以有效地“取消”CSS id，但我不建议这样做。

Stack Overflow用户

发布于 2017-04-24 20:24:57

为了通过css文件切换样式，可以使用以下命令：

scene.getStylesheets().clear();
setUserAgentStylesheet(null);
scene.getStylesheets().add(getClass().getResource("theme1.css").toExternalForm());

为了您的目的，恢复以前的样式，我认为您不能直接这样做，但您可以这样做: 1)使用变量来存储previousStyle。

2)当您切换到新样式时，您必须设置值previousStyle是当前样式。因此，如果您想恢复到以前的样式，只需调用previousStyle。

票数 1

Stack Overflow用户

发布于 2017-04-25 00:02:14

我的解决方案确实遵守所有css规则。

w3schools

在引用特定/唯一对象时，应该使用id选择器(由#your_id_name表示)。

元素的id在页面中应该是唯一的，因此id选择器用于选择一个唯一的元素！

注意:在我的解决方案中没有遵守这个规则。

解决方案：

CSS包括：

#button-default {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

#button-default:hover {
    -fx-background-color: linear-gradient(#82c0ce, #3f6770);
}

#button-selected {
    -fx-background-color: linear-gradient(#3f6770, #82c0ce);
}

代码：

在创建按钮时，我将id设置在那里：

Button b = new Button();
//....
b.setId("button-default");

一些触发事件：

//....
(activeButton, newSelectedButton) -> {
    if (!activeButton.equals(newSelectedButton)){
        activeButton.setId("button-default");
        newSelectedButton.setId("button-selected");
    }
} 
//....