查找並替換子元素的樣式屬性

Question

我想循環訪問子元素並刪除/修改某些樣式屬性。我的div是動態生成的，我可以訪問它的ID。我的DIV可以

<div id="headline" style="position"> 
    <div style="text-align: center;"> 
     <b style="color: rgb(255, 204, 153);"><font size="5">Expansion Pack</font></b> 
    </div> 
</div> 

或

<div id="headline" style="position"> 
    <div style="text-align: center;"> 
     <span style="color: rgb(255, 204, 153);"> 
      <font size="4">Expansion Pack</font> 
     </span> 
    </div> 
</div> 

我想從標題的子元素更改字體大小或顏色。

我知道怎麼讀父DIV

$('#headline').find('*').each(function() { 
    // do stuff 
}); 

裏面的所有元素，但我怎麼能找到樣式屬性的顏色和改變顏色或找到字體大小和更改字體的大小。

Answer 1

你可以嘗試以下DEMO

這兩種情況下

$('#headline').find('*').each(function (i, item) { 
    var color = $(item).find("b,span"); 
    var font = $(item).find("font"); 

    $(color).css('color', 'red'); 
    $(font).css('font-size', '50px') 
}); 

Answer 2

如果我得到它的權利，這是你需要做什麼：

$('#headline').each(function() { 
    $(this).find('div').css({ 
     'font-color': 'blue', 
     'font-family': 'arial', 
     ... 
    }); 
    $(this).find('font').css({ 
     'font-color': 'red', 
     'font-family': 'roboto', 
     ... 
    }); 
}); 

或者你可以用得到的樣式值：

var font-size = $(this).find('div').css('font-size'); 

Answer 3

這是你在找什麼？

#headline font { 
    font-size:23px; 
} 

JSFiddle