Question 160839 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Is a phrase present in a DIV style using jQuery?

So I have a DIV that contains a background image. In some cases this image is set "directly", in other cases it’s a generated SVG. I want to be able to identify when a DIV contains the SVG-string.

My two DIVs:

<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>

And I try this:

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

So, DIV 1 changes as QQ is found. DIV 2 does not change as "svg+xml" is not found within the DIV-field it self (but is in the style). How do I identify the "svg+xml" in DIV 2?

I was hoping to identify the "svg+xml" within the style of the DIV

Tags:

4

Answers


  1. 0

    To identify when a DIV contains an SVG-string as a background image, you can use JavaScript to check the style attribute of the DIV and look for the "data:image/svg+xml" substring. Here’s an example

    // Get all the DIVs with class "cover"
  var covers = document.querySelectorAll('.cover');
  
  // Loop through each DIV
  covers.forEach(function(cover) {
    // Check if the background image is an SVG
    if (cover.style.backgroundImage.indexOf('data:image/svg+xml') !== -1) {
      // console log if found
      console.log(cover);
    }
  });
    <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>

    I see you are using jQuery, so here;s the updated code for you

    jQuery

    $('.cover').each(function() {
    // Check if the background image is an SVG
    if ($(this).css('background-image').indexOf('data:image/svg+xml') !== -1) {
      // console log if found
      console.log($(this));
    }
  });
    Login or Signup to reply.
  2. 0

    :contains works only for the content of the element. You can use filter and includes to select your items with svg background

    $(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>
    Login or Signup to reply.
  3. 0

    If you know upfront that you svg+xml is always going to be in the style attribute, you could use the [attr*=value] attribute selector. This will check if value is present in 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>
    Login or Signup to reply.
  4. 0

    This code worked for me.
    This will be turning the text color into red if it contains data:image/svg+xml and it will change the text color to black in case data:image/svg+xml is not available in the background-url link

    Here is an example: You can run the below snippet and check in this snippet
    The DIV contains SVG background image so on document load the text of the DIV
    will be in RED color

    $(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>

    Here is an example: You can run the below snippet and check in this snippet
    The DIV contains a PNG background image so on document load the text of the DIV
    will be in BLACK color

    $(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>

    Hope this example will be helpful to you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search