时间戳

首页 > 解决方案 > 需要 Javascript（或 JQuery）长字符串搜索和 CSS 插入帮助

javascript - 需要 Javascript（或 JQuery）长字符串搜索和 CSS 插入帮助

问题描述

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

这可以做到吗？

标签： javascriptjquerycss

解决方案

您可以使用单个选择器字符串来实现此目的：获取标签定义的 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表示标签名称；带点前缀的子字符串表示类；紧跟在 a 内的字符串[表示属性名称，引号内的值表示属性值。）

只需将其传递给 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;"]

推荐阅读