Question

我需要动态更改DOM。我想访问'text-align'和'line-height'属性。

例如：

<p style="line-height:1.0;text-align:justify;">

我需要访问DOM中的所有样式属性，并遍历每个'text-align'和'line-height'属性并更改它们的值。如何访问这些属性。实际上我需要做的是通过这两个属性并将text-align更改为left并将行高改为1.5（如果小于1.5

非常感谢你。

Answer 1

您可以使用$("#selector").css({'property' : 'value'});

来自文档：http://api.jquery.com/css/

您可以使用此方法设置属性。

编辑：
要检查元素是否具有css样式，可以使用以下SO答案：
jQuery: check if element has CSS attribute

Answer 2

您可以使用.css方法来实现此目的：

$('p').css({'lineHeight':'1.0','textAlign':'right'})

<强>更新：

如果要选择具有line-height样式的所有元素，可以使用以下选择器：

$('*[style*="line-height"]').css({'lineHeight':'1.5'})

Answer 3

尝试：

$(document).ready(function(){
$("*").each(function(){
alert($(this).css('lineHeight'));
if($(this).css('lineHeight')){
$(this).css({'lineHeight':'1.0'});
}
if($(this).css('textAlign')){
    $(this).css({'textAlign':'right'});
}
});
});

此处$("*")将选择DOM中的所有元素，然后.css("propName")将检查propName＆＃39; {element {{}}中是否存在css属性{1}}。如果它存在，则.css({'propname':'newValue'});将为该属性分配一个新值。

希望它有所帮助。

Answer 4

如前所述，您可以使用：

$('p').css({'lineHeight':'1.0','textAlign':'right'});

您也可以使用：

$('p').css('lineHeight', '1.0');
$('p').css('textAlign', 'right');

虽然不推荐，但因为这会取代所有其他样式，你甚至可以这样做：

$('p').attr('style', 'lineHeight: 1.0; textAlign: right;');

要选择dom上的所有元素，只需使用$('*')选择器。

$(document).ready(function(){
    $("*").each(function(){
        // 1.0 == 16px | 1.5 == 24px
        if(parseInt($(this).css('lineHeight'), 10) < 24){
            $(this).css({'lineHeight':'1.5'});
        }
    });
});

HERE是JSFiddle

如何使用jquery访问内联css样式属性并更改DOM中的属性？

4 个答案: