如何用jQuery选择带特定内联样式的div并修改文本颜色？

你的代码存在两个关键问题：

• 直接用$('div').css('width')只会获取第一个div的宽度，判断后会把所有div文本变红，无法精准匹配目标元素；
• 属性选择器[style="width: 50%;"]要求style属性完全匹配，一旦元素style里有其他样式（比如position: relative;）或空格格式不同，就会匹配失败，且$(this)在这里也无法指向目标元素。

下面提供两种可靠的解决方案：

方案1：遍历所有Div，检查计算后的宽度 #

通过each()遍历每个div，判断其宽度是否为50%（注意jQuery的css('width')返回值是不带分号的，比如"50%"，不是你写的"50%;"）：

$(function(){
    $('div').each(function(){
        if ($(this).css('width') === '50%') {
            $(this).css('color', 'red');
        }
    });
});

方案2：用属性过滤匹配内联样式 #

如果需要严格匹配内联style里的width: 50%;，可以用filter()方法检查style属性内容，兼容空格差异：

$(function(){
    $('div').filter(function(){
        return /width\s*:\s*50%/i.test($(this).attr('style'));
    }).css('color', 'red');
});

测试代码（可直接运行） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 50%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div style="width: 90%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div style="width: 50%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div style="position: relative;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

内容的提问来源于stack exchange，提问作者abcid d