jquery 检查短语是否以DIV样式存在

fquxozlt 于 2023-05-17 发布在 jQuery

关注(0)|答案(3)|浏览(121)

所以我有一个包含背景图像的DIV。在某些情况下，这个图像是“直接”设置的，在其他情况下，它是生成的SVG。我希望能够识别DIV何时包含SVG字符串。
我的两个部门：

<div class="cover my-1" style="background-image: url('something.jpg');">Div 1 QQ</div>
<div class="cover my-2" style="background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc...=');">Div 2</div>

我试着这样做：

$(document).ready(function() {
  $(".cover.my-1:contains(QQ)").css("background-color", "yellow");
  $(".cover.my-2:contains(svg+xml)").css("background-color", "yellow");  
});

因此，DIV 1随着QQ的发现而改变。DIV 2不会改变，因为在DIV字段中找不到“svg+xml”（但在样式中）。如何识别DIV 2中的“svg+xml”？
我希望在DIV的样式中识别“svg+xml”

jquery

来源：https://stackoverflow.com/questions/76207779/check-if-phrase-is-present-in-div-style

3条答案

按热度按时间

bd1hkmkf1#

:contains只对元素的内容起作用。您可以使用filter和includes来选择带有svg背景的项目

$(document).ready(function(){
  $(".cover.my-1:contains(QQ)").css("background-color", "yellow");
 $(".cover.my-2").filter((_, el) => $(el).css("background-image").includes("svg+xml")).css("background-color", "yellow");  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cover my-1" style="background-image: url('something.jpg');">Div 1 QQ</div>
<div class="cover my-2" style="background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc...=');">Div 2</div>
<div class="cover my-2" style="background-image: url('something.jpg');">Div 2 with class .cover.my-2, but without svg background is not selected</div>

赞(0）回复(0）举报 2023-05-17

vaqhlq812#

如果你事先知道你的svg+xml总是在style属性中，你可以使用[attr*=value] attribute selector。这将检查value是否存在于attr中。

$(document).ready(function() {
  $(".cover.my-1:contains(QQ)").css("background-color", "yellow");
  $('.cover.my-2[style*="svg+xml"]').css("background-color", "yellow");  
});

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

<div class="cover my-1" style="background-image: url('something.jpg');">Div 1 QQ</div>
<div class="cover my-2" style="background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc...=');">Div 2</div>

赞(0）回复(0）举报 2023-05-17

fcg9iug33#

这个代码为我工作。如果包含data:image/svg+xml，则将文本颜色变为红色，如果在background-url链接中没有data:image/svg+xml，则将文本颜色变为黑色

**这里是一个例子：**您可以运行下面的片段并签入此片段DIV包含SVG背景图像，因此在文档加载时，DIV的文本将为红色

$(document).ready(function(){
  if($('.cover').attr("style").indexOf('data:image/svg+xml') != -1){
    $('.cover').css({'color':'#ff0000'});
  }else{
    $('.cover').css({'color':'#000000'});
  }
})

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

<div class="cover" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiIGhlaWdodD0iMTAwcHgiIHdpZHRoPSIxMDBweCI+CjxnPgoJPHBhdGggZD0iTTI4LjEsMzYuNmM0LjYsMS45LDEyLjIsMS42LDIwLjksMS4xYzguOS0wLjQsMTktMC45LDI4LjksMC45YzYuMywxLjIsMTEuOSwzLjEsMTYuOCw2Yy0xLjUtMTIuMi03LjktMjMuNy0xOC42LTMxLjMgICBjLTQuOS0wLjItOS45LDAuMy0xNC44LDEuNEM0Ny44LDE3LjksMzYuMiwyNS42LDI4LjEsMzYuNnoiLz4KCTxwYXRoIGQ9Ik03MC4zLDkuOEM1Ny41LDMuNCw0Mi44LDMuNiwzMC41LDkuNWMtMyw2LTguNCwxOS42LTUuMywyNC45YzguNi0xMS43LDIwLjktMTkuOCwzNS4yLTIzLjFDNjMuNywxMC41LDY3LDEwLDcwLjMsOS44eiIvPgoJPHBhdGggZD0iTTE2LjUsNTEuM2MwLjYtMS43LDEuMi0zLjQsMi01LjFjLTMuOC0zLjQtNy41LTctMTEtMTAuOGMtMi4xLDYuMS0yLjgsMTIuNS0yLjMsMTguN0M5LjYsNTEuMSwxMy40LDUwLjIsMTYuNSw1MS4zeiIvPgoJPHBhdGggZD0iTTksMzEuNmMzLjUsMy45LDcuMiw3LjYsMTEuMSwxMS4xYzAuOC0xLjYsMS43LTMuMSwyLjYtNC42YzAuMS0wLjIsMC4zLTAuNCwwLjQtMC42Yy0yLjktMy4zLTMuMS05LjItMC42LTE3LjYgICBjMC44LTIuNywxLjgtNS4zLDIuNy03LjRjLTUuMiwzLjQtOS44LDgtMTMuMywxMy43QzEwLjgsMjcuOSw5LjgsMjkuNyw5LDMxLjZ6Ii8+Cgk8cGF0aCBkPSJNMTUuNCw1NC43Yy0yLjYtMS02LjEsMC43LTkuNywzLjRjMS4yLDYuNiwzLjksMTMsOCwxOC41QzEzLDY5LjMsMTMuNSw2MS44LDE1LjQsNTQuN3oiLz4KCTxwYXRoIGQ9Ik0zOS44LDU3LjZDNTQuMyw2Ni43LDcwLDczLDg2LjUsNzYuNGMwLjYtMC44LDEuMS0xLjYsMS43LTIuNWM0LjgtNy43LDctMTYuMyw2LjgtMjQuOGMtMTMuOC05LjMtMzEuMy04LjQtNDUuOC03LjcgICBjLTkuNSwwLjUtMTcuOCwwLjktMjMuMi0xLjdjLTAuMSwwLjEtMC4yLDAuMy0wLjMsMC40Yy0xLDEuNy0yLDMuNC0yLjksNS4xQzI4LjIsNDkuNywzMy44LDUzLjksMzkuOCw1Ny42eiIvPgoJPHBhdGggZD0iTTI2LjIsODguMmMzLjMsMiw2LjcsMy42LDEwLjIsNC43Yy0zLjUtNi4yLTYuMy0xMi42LTguOC0xOC41Yy0zLjEtNy4yLTUuOC0xMy41LTktMTcuMmMtMS45LDgtMiwxNi40LTAuMywyNC43ICAgQzIwLjYsODQuMiwyMy4yLDg2LjMsMjYuMiw4OC4yeiIvPgoJPHBhdGggZD0iTTMwLjksNzNjMi45LDYuOCw2LjEsMTQuNCwxMC41LDIxLjJjMTUuNiwzLDMyLTIuMyw0Mi42LTE0LjZDNjcuNyw3Niw1Mi4yLDY5LjYsMzcuOSw2MC43QzMyLDU3LDI2LjUsNTMsMjEuMyw0OC42ICAgYy0wLjYsMS41LTEuMiwzLTEuNyw0LjZDMjQuMSw1Ny4xLDI3LjMsNjQuNSwzMC45LDczeiIvPgo8L2c+Cjwvc3ZnPg=='); width:100px; height:100px; color:#000">Div 2</div>

**这里是一个例子：**您可以运行下面的片段并签入此片段DIV包含PNG背景图像，因此在文档加载时，DIV的文本将为黑色

$(document).ready(function(){
  if($('.cover').attr("style").indexOf('data:image/svg+xml') != -1){
    $('.cover').css({'color':'#ff0000'});
  }else{
    $('.cover').css({'color':'#000000'});
  }
})

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

<div class="cover" style="background-image: url('data:image/png;base64,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'); width:100px; height:100px; color:#000">Div 2</div>

希望这个例子对你有帮助

赞(0）回复(0）举报 2023-05-17

我来回答

jquery 检查短语是否以DIV样式存在

3条答案

相关问题

热门标签

最新问答