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');
    }

但似乎＆＃34; if条款＆＃34;永远不会是真的。（我知道可能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 attribute selectors来选择有效的图片/元素。

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

2 个答案: