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

2023年7月14日 256次阅读

我需要一个解决方案来搜索在第三方系统中创建的部分动态生成的页面中的字符串并应用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;

可以这样做吗？

最佳答案 您可以使用单个选择器字符串实现此目的：获取标记定义的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 =“,请使用样式^ =检查样式属性是否以所需字符串开头：

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