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

时间:2014-09-12 08:20:43

标签: javascript jquery css

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

你能帮助我吗?

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:2)

为了应用更多声明,您可以通过纯CSS实现这一点:

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

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