0

Would it be possible to apply a CSS class to either the <img> or its container <div> with javascript or JQuery, based on the filename of the <img> src?

Could you assign a (already existing) CSS class to the <img src="...-A.jpg"> or its parent <div> when i.e. A is present within the filename?

To add to this idea
Would it be possible to not only apply the styling automatically like that, but also create the whole <img> tag? Ideally I would have different 'project' pages, on which I'd link an images folder i.e. images/project-1 to a <div id="image-container">.

Could you use Javascript to create the subsequent <div><img/></div> structure within the parent container <div>? Or would this have to be some sort of PHP input?

Say you'd have;

.class-for-A {
   width:200px;
}
.class-for-B {
   width:400px;
}
.class-for-C {
   width:600px;
}

<div id="image-container">    
<!--(this section to be created automatically, and apply styles subsequently based on file name end)-->
   <div>
      <img src="img-filename-123-B.jpg"/>
   </div>
   <div>
      <img src="img-filename-456-B.jpg"/>
   </div>
   <div>
      <img src="img-filename-789-C.jpg"/>
   </div>
   <div>
      <img src="img-filename-789-A.jpg"/>
   </div>

It's the idea that A, B, C, are only used to indicate a class styling, instead of a sequence. Each img or div could in this way be styled automatically, functioning as a sort of light content management system (so there might ever only be three css class styles (A, B, C), but they would be re-used multiple times on different multiple images/divs).

This was just a thought I had, and I was curious to see if anyone had any thoughts on this.

Maurits
  • 1
  • 1

5 Answers5

1

You can try document.querySelector or document.querySelectorAll if you want to get elements by their src attributes.

document.querySelectorAll('img[src='your_filename']');
Max Starling
  • 967
  • 8
  • 8
0

You can select element using selector. 

const image123 = document.querySelector("div img:nth-of-type(1)")
const image456 = document.querySelector("div img:nth-of-type(2)")
const image789 = document.querySelector("div img:nth-of-type(3)")

// OR

const image1123 = document.querySelector("div").children[0]
const image1456 = document.querySelector("div").children[1]
const image1789 = document.querySelector("div").children[2]

//image123.style = //modify here
// image123.className //all class applied
.class-for-A {
   width:200px;
}
.class-for-B {
   width:400px;
}
.class-for-C {
   width:600px;
}
<div>
   <img class="pic1" src="img-filename-123-A.jpg"/>
</div>
<div>
   <img src="img-filename-456-B.jpg"/>
</div>
<div>
   <img src="img-filename-789-C.jpg"/>
</div>
xdeepakv
  • 7,835
  • 2
  • 22
  • 32
0

That's super easy using JavaScript:

const imgs = document.getElementsByTagName('img');
for(const img of imgs) {
    var name = img.src.substring(0, img.src.lastIndexOf('.'));
    if(name.endsWith('A')) {
        img.class = 'class-for-A';
        // or to apply class to parent element:
        img.parentElement.class = 'some-class'
    }
}
Mohammad Dehghan
  • 17,853
  • 3
  • 55
  • 72
  • Thank you Mohammad, that sounds very good indeed. Would this also work if multiple images end in 'A'? I saw some answers come in that made me realise I forgot this part of the question (kind of crucial I know). I have update the question accordingly. – Maurits Mar 27 '20 at 11:17
  • @Maurits Yes, it works for that scenario too. I guess you need to learn more about programming in general! :) – Mohammad Dehghan Mar 27 '20 at 11:22
  • Thank you for your reply. I would like to, but I'm really just a hobbyist coder, so for me its learning by reading other peoples questions/answers primarily. It's the first time I thought to post a question myself as I found this one hard to Google. Really appreciate your help :-) I'll go ahead and try your approach some time soon (I was first trying to suss out if my idea would actually be feasible). – Maurits Mar 27 '20 at 11:28
0

Try this.

const images = document.querySelectorAll("img");

for (let image of images) {
  if (image.getAttribute("src").indexOf("A.jpg") !== -1) {
    image.setAttribute("class", "class-for-A");
  } else if (image.getAttribute("src").indexOf("B") !== -1) {
    image.setAttribute("class", "class-for-B");
  } else {
    image.setAttribute("class", "class-for-C");
  }
}

It’s not that clean, but it works.

Federico Moretti
  • 527
  • 1
  • 11
  • 22
0

Thank you for answering my question. It has been a great help. I have altered my question earlier today to include extended functionality. But I might have already found a solution to this;

Question:
Could you use Javascript to create the subsequent <div><img/></div> structure, based on all images contained in a single folder, within the parent container <div>?

Found answer:
How to load all the images from one of my folder into my web page, using Jquery/Javascript

Maurits
  • 1
  • 1