javascript - 如何在 EXtJS 中动态更改 css 内容

Question

我的资源文件夹中有一个 css，我想根据我的情况更改/添加 css 中的一些值，但我不知道如何获得它。

示例代码在这里

triggers: {
        clear: {
            cls: 'Clear-Value',
            hidden:true,
            handler: function(){
                //some code
            }
        }
    },

我的 clear-value 的 css 是

.Clear-Value:before {
    background-color:white !important;  }

现在我想在某些条件下放置一些 clss。就像添加填充或其他东西一样。

我正在尝试这样

beforerender: function (cmp, eOpts) {
        debugger;
        var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
        if(isFirefox){
            this.triggers.clear.cls // Here I am getting Clear-Value
        }
    },

我正在获取 cls，但需要一些帮助来编辑 CSS。任何人都可以帮助解决这个问题。

谢谢。

Answer 1

创建一个新的 CSS 类并在其中添加 Firefox 所需的样式。仅当浏览器为 Firefox 时才将此类添加到组件类列表。

试试这个...

beforerender: function (cmp, eOpts) {
        var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
        if(isFirefox){
            cmp.addCls('firefox-fix');
        }
},

.firefox-fix { padding-top :7px !important; }

在 firefox-fix CSS 类中添加 Firefox 的 CSS。 我希望这会有所帮助。