javascript - 根据其内联样式的值将 "inline style"替换为 "css class"

Question

我的站点有 CMS，因此用户可以直接插入文本和图像。 CMS ui 允许 float 左/右图像，将内联样式应用于 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');
   }
});