javascript - 检测 flag-icon-css 的不存在标志

Question

请查看代码片段。

我有一个包含国家代码的数据表。

在我的代码中，我将 html 放在一起以构建 flag-icon-COUNTRYCODE，以便显示该标志。 然而，我们有一些记录没有有效的国家代码，因此不会显示任何标志，因为在 flag-icon 的 css 中没有这样的条目。

有没有办法检测(使用 javascript？)没有为无效国家代码 XX 显示标志？

<link href="https://cdn.bootcss.com/flag-icon-css/2.8.0/css/flag-icon.css" rel="stylesheet"/>

<i class="flag-icon flag-icon-it"> </i>
<i class="flag-icon flag-icon-XX"> </i>
<i class="flag-icon flag-icon-co"> </i>

Answer 1

给您一个解决方案 https://jsfiddle.net/rrxt88xh/

var ele = document.getElementsByTagName('i');
for(var i=0; i< ele.length; i++){
   var img = ele[i];
   var style = img.currentStyle || window.getComputedStyle(img, false);
   if (style.backgroundImage === 'none'){
      console.log("No Flag!!!");
   }
}

<link href="https://cdn.bootcss.com/flag-icon-css/2.8.0/css/flag-icon.css" rel="stylesheet"/>

<i class="flag-icon flag-icon-it"> </i>
<i class="flag-icon flag-icon-XX"> </i>
<i class="flag-icon flag-icon-co"> </i>

检查 background-image，如果 background-image 为 none，则表示没有标志可用。

希望这能解决您的问题。