将“内联样式”替换为“css 类”，具体取决于其内联样式的值答案

【问题标题】：Replace "inline style" with a "css class" depending by value of its inline style将“内联样式”替换为“css 类”，具体取决于其内联样式的值
【发布时间】：2014-09-12 08:20:43
【问题描述】：

我的网站有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() 都没有被解雇）

你能帮帮我吗？

【问题讨论】：

标签： javascript jquery css

【解决方案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');
   }
});

【讨论】：

几乎完美！ :-) 但是如果 cms 还应用其他内联样式，如宽度和高度，如何仅删除“float:left”声明？
mhmmm Firebug 返回：“TypeError: $(...).attr(...) is undefined if ( $(this).attr('style').indexOf('float:left') > -1 ) {”
它可能是由其他原因引起的，请分享一个 jsFiddle 供我们检查@LucaDetomi

【解决方案2】：

为了应用更多的声明，你可以简单地通过纯 CSS 来实现：

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

您可以使用CSS attribute selectors 来选择有效的图像/元素。

【讨论】：

ohhhh 真的很有趣.....我完全不知道这种事情！！！！ :-)
总是更喜欢 css 方法 +1 :)