动态删除伪css类

Question

我在我的项目中使用extjs 4.2.2.1144，它生成一个伪css类，如下所示

//从需要大纲的单个组件中移除大纲，而不是全局重置

.#{$prefix}webkit {
    * {
        &:focus {
            outline:none !important;
        }
    }
}

生成css，如下所示：

.x-webkit *:focus {
  outline: none !important;
}

这只在IE的可编辑表中导致了性能问题，但对于chrome，它工作得很好，如果我删除了它，性能就会显著提高。

有没有办法在页面加载中使用简单的javascript或jquery卸载这个伪类(不从css文件中删除)？

Answer 1

您可以使用cls属性在组件级别应用一个类，然后让框架和浏览器为您完成这项工作。

http://docs.sencha.com/extjs/4.2.6/#!/api/Ext.form.field.Text-cfg-cls

下面是一个使用上述文档页面中的示例的示例：

在组件文件(/project_root/app/view/.../MyComponent.js)中

// My Component
Ext.create('Ext.form.Panel', {
  title: 'Contact Info',
  width: 300,
  bodyPadding: 10,
  renderTo: Ext.getBody(),
  items: [{
    xtype: 'textfield',
    name: 'name',
    fieldLabel: 'Name',

    cls: 'no-outline-on-focus' // <-- this will be applied to the component container 

    allowBlank: false 
  }, {
    xtype: 'textfield',
    name: 'email',
    fieldLabel: 'Email Address',
    vtype: 'email'  format
  }]

})；

在您的sass文件(/project_root/sass/etc/all.scss)中

// the parent component with extjs generated styles
.no-outline-on-focus {

  // everything within this block is scoped to the element above. 
  *:focus {
     outline: none !important;
   }
}

如果您没有安装命令行界面，这里有一个链接：https://www.sencha.com/products/extjs/cmd-download/

听起来你可能已经有了它，或者已经有了一个项目，但想要发送链接以防万一。

如果您不想下载或不需要CLI，这里有一个使用SASS：http://sass-lang.com/install生成您自己的CSS输出的链接。

Sencha提供了文档中链接的大量sass变量，这使得样式和主题更容易一些。:)

Answer 2

如果样式属性未驻留在样式表中，则将样式属性设置为空字符串将删除该属性。

这可能行得通

$(".x-webkit :focus").css("outline", "");