4

I want to try find an image that has a src that starts with a particular path and change its css properties with vanilla js. Assume I don't have access to its id o class.

Here's something similar using jquery:

$("img").each(function(i, elem){
  if ($(this).attr("src") == "http://googl"){
    $(this).css('display','none');
  }
});

4 Answers 4

7

You dont need js or jquery for this - use the CSS attribute selector and hide the image based on the src attribute matching the target text. Note the syntax of the selector to match the src attribute value which is any text preceded by "https://www.google"

img[src ^= "https://www.google"]{
  display: none;
}
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwi39tv6xerjAhUPfysKHYwUBfIQjRx6BAgBEAU&url=https%3A%2F%2Fweheartit.com%2Fentry%2F230207975&psig=AOvVaw2PDSxeoivmwsXMXWxVICIQ&ust=1565053762473751" alt="google-image"  title="google-image" />
<img src="https://via.placeholder.com/100x150" alt="not google-image"   title="not google-image" />

2
  • Beautiful. Thank you!
    – grabury
    Commented Aug 5, 2019 at 1:15
  • no probs - thanks for liking my solution - hppy coding :)
    – gavgrif
    Commented Aug 5, 2019 at 1:15
0

There are a number of ways this can be done - a simple approach would be via an attribute base selector using querySelectorAll() as follows:

const findSrc = 'https://via.placeholder.com/100x150';

/* Query document for all img elements with src attribute matching findSrc */
const imgs = document.querySelectorAll(`img[src="${findSrc}"]`);

for (const img of imgs) {

  /* Manipulate style object on found image directly */
  img.style.border = "2px solid red";
}
<img src="https://via.placeholder.com/350x150" />
<!-- 
Find and update styling on following images with src of
https://via.placeholder.com/100x150 
-->
<img src="https://via.placeholder.com/100x150" />
<img src="https://via.placeholder.com/100x150" />
<img src="https://via.placeholder.com/100x150" />

To find a single image element with specific src attribute, you can use querySelector() in a similar way:

const findSrc = 'https://via.placeholder.com/100x150';

/* Query document for all img elements with src attribute matching findSrc */
const img = document.querySelector(`img[src="${findSrc}"]`);

/* Manipulate style object on found image directly */
img.style.border = "2px solid red";
<img src="https://via.placeholder.com/100x150" />
<img src="https://via.placeholder.com/100x150" />

0

1.get all <img> by using document.querySelectorAll('img')

2.using for loop and String.indexOf() to filter imgs

3.modify the style of all the <img> which matchs the condition

let imgs = document.querySelectorAll('img');
let specificSrcHead = 'http://googl';

for (let img of imgs) {
    if (img.src.indexOf(specificSrcHead) === 0) {
        img.style.display = 'none';
    }
}
0

in my case i have to target an image of which src element contains a specific file name of an icon , i targeted that by doing this and it solved my problem, I I have used "&" in start because i was using SCSS , therefore you can omit it if not required, Thanks

img[src*="/yapily.svg"] {
                    filter: brightness(3);
                  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.