Question

我有以下html标记。

<p> lorem ipsum lorem ipsum 
<font style="background-color:yellow"> ipsum </font> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id enim in tellus sollicitudin viverra. Morbi nec ipsum ligula, non volutpat enim. In quis metus <font style="color:red"> Tincidunt lorem </font>blandit faucibus. Nam condimentum facilisis vestibulum. Nunc tristique est vel erat sagittis ac placerat orci varius.</p>

我想只选择具有“background-color:yellow”的字体，而不是任何其他<font>标记的字体

Answer 1

您可以简单地使用过滤功能：

$("font").filter(function(){
    var bg=$(this).css("background-color");
    return bg=="yellow" || bg=="rgb(255,255,0)";
});

<强>更新

要添加类，请调用addClass函数：

$("font").filter(function(){
    var bg=$(this).css("background-color");
    return bg=="yellow" || bg=="rgb(255,255,0)";
}).addClass("hlight");

Answer 2

我试过了，但不知何故addClass没有用。所以想出这个解决方案。

$('font').filter(function(){ 
            var bg=$(this).css("background-color"); 
            alert('bghlight - ' + bg);
       if ( bg == "rgb(255, 255, 0)" || bg == "yellow" )
       {
        $(this).addClass('hlight');
        $('font.hlight').each(function(){
        $(this).replaceWith($('<abbr>' + this.innerHTML + '</abbr>').addClass('abbr-hlight'));  
        });
       }
    });

如何选择具有样式属性值的字体

2 个答案: