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

问题描述：

我在我的资源文件夹中有一个css，我想根据自己的情况在css中更改/添加很少的值，但我不知道如何获取该值。如何在EXtJS中动态更改css内容

示例代码是在这里

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

我明确的价值的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。任何人都可以帮助解决这个问题。

谢谢。

将CSS添加到单独的CSS类/选择器层次结构并将这些类添加到触发器而不是编辑CSS本身会不会更好？即在你的CSS中添加'.firefox-trigger-padding-fix'，然后让你的触发器成为'清除值firefox-trigger-padding-fix'？ –

'.firefox-trigger-padding-fix'只能用于fierfoex。我的CSS将如何看起来像。 – David

这取决于你想要做什么。我确信有CSS标签是明确的Firefox浏览器，但我没有他们的手。如果你走这条路线，那么你不需要在Ext中编辑CSS类，它将全部由CSS驱动。在JS中添加类也可以进行其他检查。我给出的例子会给触发器提供'.Clear-Value'和'.firefox-trigger-padding-fix'两个类，所以你可以使用简单的'.firefox-trigger-padding-fix {。（'.firefox-trigger-padding-fix .Clear-Value {...}'） –

答

创建一个新的CSS类并添加您需要的Firefox的样式。仅当浏览器是Firefox时才将此类添加到组件classlist。

试试这个...

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

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

添加您的CSS为Firefox在firefox-fix CSS类。我希望这可以帮助。

'Ext.isGecko'如何？ – Alexander

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

相关推荐