检查css类是否存在并且可以应用

Question

我正在使用lipis旗帜图标集和angularjs.我想检查给定的标志是否存在是css.对此最好的方法是什么？

现在我只是应用该类,如果该标志不存在,则不显示任何内容.

 <i class="flag-icon" ng-class="'flag-icon-' + dialog.model.item.code | lowercase"></i>

但是,如果css中不存在类,我想显示一些像"No flag"这样的文本.要做到这一点,我需要一些方法来检查给定的flag-icon-xx是否存在,但是我该怎么做？

Answer 1

基于字体的图标的纯CSS解决方案

编辑:看起来你正在使用的图标集是基于背景的,所以请查看我的答案的第二部分以寻找潜在的解决方案.我会把这部分留给未来的读者.

如果您使用的是基于字体的图标集,则可以相对轻松地使用纯CSS执行此操作.只需要一个基本选择器,它将文本"No flag"应用于::before或者::after伪元素(取决于基于字体的图标集使用自身):

.flag-icon::before {
    content: 'No flag';
}

只要我们的其他基于字体的图标在此声明之后声明或具有更高的特异性,它们自己的content属性将覆盖它.

例

.flag-icon::before {
  content: 'No flag';
}

.flag-icon-star::before {
  content: '?'
}

<h3>Working Icon</h3>
<i class="flag-icon flag-icon-star"></i>

<h3>Default Text</h3>
<i class="flag-icon flag-icon-null"></i>

基于图像的图标的纯CSS解决方案

如果它不是您正在使用的基于字体的图标集,您仍然可以对基于背景的图标集应用类似的方法.为此,我们仍然使用与上面使用的相同::before或::after伪元素,但在有效的图标类上完全覆盖它:

.flag-icon::before {
    content: 'No flag';
}

.flag-icon-1::before,
.flag-icon-2::before,
... {
    content: '';
}

例

.flag-icon::before {
  content: 'No flag';
}

.flag-icon-star::before {
  content: '';
}

.flag-icon-star {  
  background: url(http://i.imgur.com/yiJrwe0.png) no-repeat;
  display: block;
  height: 131px;
  width: 100px;
}

<h3>Working Icon</h3>
<i class="flag-icon flag-icon-star"></i>

<h3>Default Text</h3>
<i class="flag-icon flag-icon-null"></i>