[英]remove pseudo css class dynamically
我在我的项目中使用extjs 4.2.2.1144,它将生成一个伪CSS类,如下所示
//从需要它的单个组件中删除轮廓,而不是全局重置
.#{$prefix}webkit {
* {
&:focus {
outline:none !important;
}
}
}
正在生成css,如下所示:
.x-webkit *:focus {
outline: none !important;
}
这仅在IE中的可编辑表中引起性能问题,但是对于chrome来说,它的工作正常,如果我删除它,性能将得到显着改善。
有没有办法使用简单的javascript或jquery在页面加载中卸载(不从css文件中删除)此伪类?
您可以通过使用cls
属性在组件级别应用一个类来确定css的范围,然后让框架和浏览器为您完成工作。
http://docs.sencha.com/extjs/4.2.6/#!/api/Ext.form.field.Text-cfg-cls
这是一个使用上面文档页面中示例的示例:
// 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
}]
});
// 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;
}
}
以防万一您没有安装CLI,以下是链接: https : //www.sencha.com/products/extjs/cmd-download/
听起来您可能已经拥有或已经建立了一个项目,但是想发送链接以防万一。
如果您不希望下载或不希望使用CLI,以下是使用SASS生成自己的CSS输出的链接: http : //sass-lang.com/install
Sencha在文档中提供了大量的sass变量链接,这些变量使样式和主题设置更加容易。 :)
如果样式属性不存在于样式表中,则将其设置为空字符串将删除该属性。
这可能有效
$(".x-webkit :focus").css("outline", "");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.