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

如果我做得对，这就是你需要做的事情：

$('#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 2

这是你在找什么？

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

JSFiddle

Answer 3

您可以尝试以下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')
});

从子元素中查找并替换style属性

3 个答案: