需要 Javascript(或 JQuery)长字符串搜索和 CSS 插入帮助

Question

我需要一个解决方案来从第三方系统中创建的部分动态生成的页面中搜索字符串并应用 CSS 字符串。我发现可能有助于完成这项工作的最接近的解决方案如下:

$(document).ready(function () {
    $('*').filter(function() { 
    return $(this).css('background-color') == "rgb(255, 255, 255)" 
    }).css('background-color', '#000')
});

但是，我需要修改它来搜索这个字符串:

    <div class="ls-wrapper ls-in-out" data-slide-index="1" style="z-index: 116; margin-left: 0px;

然后，有效地将一个新的 CSS 字符串插入到相同的元素样式表中，因此生成的代码的行为如下:

    <div class="ls-wrapper ls-in-out" data-slide-index="1" style="z-index: 116; **new-css: property;** margin-left: 0px;

这可以做到吗？

Answer 1

您可以使用单个选择器字符串实现此目的:采用标记定义的 HTML:

div class="somethingElse ls-in-out" data-slide-index="1" style="z-index: 116; margin-left: 0px;"

并将其转换为选择器字符串:

div.ls-wrapper.ls-in-out[data-slide-index="1"][style="z-index: 116; margin-left: 0px;"]

(无前缀的div表示标签名；点号前缀的子串表示类；[中的字符串表示属性名，引号内的值表示属性值。)

只需将其传递给 jQuery，然后您就可以适本地设置 css，不需要 .filter:

$('div.ls-wrapper.ls-in-out[data-slide-index="1"][style="z-index: 116; margin-left: 0px;"]')
  .css('background-color', 'yellow');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ls-wrapper ls-in-out" data-slide-index="1" style="z-index: 116; margin-left: 0px;">foo</div>
<div class="somethingElse ls-in-out" data-slide-index="1" style="z-index: 116; margin-left: 0px;">bar</div>
<div class="ls-wrapper ls-in-out" data-slide-index="1" style="z-index: 116; margin-left: 0px;">baz</div>

从技术上讲，您也可以单独使用 CSS 来实现这一点，使用相同的选择器字符串，但不确定它是否足够灵活以达到您的目的:

div.ls-wrapper.ls-in-out[data-slide-index="1"][style="z-index: 116; margin-left: 0px;"] {
  background-color: yellow;
}

<div class="ls-wrapper ls-in-out" data-slide-index="1" style="z-index: 116; margin-left: 0px;">foo</div>
<div class="somethingElse ls-in-out" data-slide-index="1" style="z-index: 116; margin-left: 0px;">bar</div>
<div class="ls-wrapper ls-in-out" data-slide-index="1" style="z-index: 116; margin-left: 0px;">baz</div>

如果 style 在您描述的字符串之后包含更多 内容，而不是 style="，请使用 style^= 以检查 style 属性以所需的字符串开始:

div.ls-wrapper.ls-in-out[data-slide-index="1"][style^="z-index: 116; margin-left: 0px;"]