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');
  }
});

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');
  }
});

• javascript
• jquery
• html
• css

4 Answers 4

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./url?sa=i&source=images&cd=&ved=2ahUKEwi39tv6xerjAhUPfysKHYwUBfIQjRx6BAgBEAU&url=https%3A%2F%2Fweheartit.%2Fentry%2F230207975&psig=AOvVaw2PDSxeoivmwsXMXWxVICIQ&ust=1565053762473751" alt="google-image"  title="google-image" />
<img src="https://via.placeholder./100x150" alt="not google-image"   title="not google-image" />

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./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./350x150" />
<!-- 
Find and update styling on following images with src of
https://via.placeholder./100x150 
-->
<img src="https://via.placeholder./100x150" />
<img src="https://via.placeholder./100x150" />
<img src="https://via.placeholder./100x150" />

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

const findSrc = 'https://via.placeholder./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./100x150" />
<img src="https://via.placeholder./100x150" />

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';
    }
}

In my case, I had 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, then I used "&" at the start because I was using SCSS, therefore you can omit it if not required, Thanks!

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