根據內聯樣式的值，將“內聯樣式”替換為“ css類”

Question

我的網站具有CMS，因此用戶可以直接插入文本和圖像。 CMS ui允許浮動左/右圖像，將內聯樣式應用於IMG標簽。

<img src='...' style='float:left'>

我想檢測IMG何時具有float:left/right樣式，並將其替換為一個類，以便為其聲明更多屬性，如以下示例所示：

.floated-left
{
  float:left;
  margin-right:20px;
  border-left:solid 5px red;
  ....
}

我想到了這樣的事情：

    if ( $("article").find('img').css('float') == 'left')
    {
       this.addClass('floated-left');
    }

但是似乎“ if子句”永遠不會成立。 （我知道this.addClass()也可能是錯誤的，但是現在都不會觸發alert() ）

你能幫助我嗎？

Answer 1

使用attr而不是css來選擇內聯樣式的對象：

$('article img').each(function() {
   if ( $(this).attr('style') == 'float:left') {

      $(this).removeAttr('style').addClass('floated-left');
   }
});

如果某些對象的樣式不同，請嘗試以下方法：

$('article img').each(function() {
   if ( $(this).attr('style').indexOf('float:left') > -1 ) {

      var targetedStyle = $(this).attr('style').replace('float:left','');
      $(this).attr('style',targetedStyle).addClass('floated-left');
   }
});

Answer 2

為了應用更多的聲明，您可以簡單地通過純CSS實現：

img[style*="float:left"],
img[style*="float: left"] {
    margin-right : 20px;
    border-left  : solid 5px red;
}

您可以使用CSS屬性選擇器來選擇有效的圖像/元素。