Style a Specific Image

Question

Let's say I had something like any of the following:

<img src="image001.jpg"> <img src="../image001.jpg"> <img src="http://localhost/image001.jpg">

Using JavaScript (no jQuery and no CSS please), is it possible to style the image(s) in question, outside of the <img> tag.

For example if I have a website and I use Google Chrome Inspect>console, could I set a style on an image? Something like:

var images = document.querySelectorAll("img"); for(var i = 0;i < images.length;i++){ var image = images[i].src; if (image.indexOf('mystring') !== -1) { console.log(image); }

You can live edit styles in the console. Beyond that it is really unclear what you are asking. Is this a site you control...or just a site you use? — charlietfl
– charlietfl, Commented Dec 17, 2016 at 21:53
just - click on the "elements" panel - click on the image you want - from the right panel change the style as you want ! — Fareed Alnamrouti
– Fareed Alnamrouti, Commented Dec 17, 2016 at 21:55
Let's say we had a website that loaded 1000 images. All were hidden but I only wanted some to be shown, and I only knew their name... — pee2pee
– pee2pee, Commented Dec 17, 2016 at 21:57

Rounin · Accepted Answer · 2016-12-17 21:57:39Z

Using JavaScript (not jQuery or CSS), is it possible to style the image(s) [...] ?

Yes, absolutely:

var images = document.getElementsByTagName('img'); images[0].style.backgroundColor = 'rgb(255,0,0)'; images[1].style.backgroundColor = 'rgb(255,255,0)'; images[2].style.backgroundColor = 'rgb(0,0,255)'; for (var i = 0; i < images.length; i++) { images[i].style.width = '100px'; images[i].style.height = '100px'; }

<img src="image001.jpg"> <img src="../image001.jpg"> <img src="http://localhost/image001.jpg">

Just like you did with src, you can also use document.querySelectorAll('img[src*="image001.jpg"]')

user7234396 · Accepted Answer · 2016-12-18 08:09:56Z

You can use the src of each <img> element as a selector in CSS.

You can then style that specific image without changing anything in the html code.

Working example:

body { text-align: center } img { margin: 0 auto; } img[src="http://placehold.it/350x149"] { border: 10px solid black } img[src="http://placehold.it/350x150"] { border: 10px solid red } img[src="http://placehold.it/350x151"] { border: 10px solid blue }

<body> <img src="http://placehold.it/350x149"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x151"> </body>

My bad, I must've misunderstood the request as it sounded like you want either JavaScript or CSS but not jQuery

Marija Robinson · Accepted Answer · 2016-12-18 18:10:25Z

If I'm understanding you right..

If you want to establish an initial attribute on the image, you can specify a style for the image, or create a style to be applied to all your images. In this example, say we want a 2 pixel border with rounded corners.

Add a Class attribute like this to the image your html file:

<img src="http://localhost/image001.jpg" class="your-class">

"your-class" being the class you create-name it what you want.

Create the class either between style tags in your html file like this:

<style> .your-class { border: 2px; border-radius: 20px; } </style>

or you can put the style in a separate CSS file (without the style tag) and reference it in the head tag of your html file like this:

<link rel="stylesheet" type="text/css" href="/css/styles.css"/>

assuming your CSS is a file called "styles.css" and is located in a css folder contained in your site's root directory.

Edited: Not the answer the OP was looking for, but edited to include additional details for anyone landing upon this.

Welcome to Stack Overflow, I think your suggestion is what @pee2pee is looking for. You could go a little further in explaining how the page will use the css you have provided, either with in page styles or as an external css file. You can edit your post to include this and make your answer more complete
Sorry no, that's creating specific CSS and amending the original code. This could be for any website I visit in theory

pee2pee · Accepted Answer · 2016-12-18 08:15:36Z

var images = document.querySelectorAll("img"); for(var i = 0;i < images.length;i++){ var image = images[i]; var imageSrc = images[i].src; if (imageSrc.indexOf("a") !== -1) { console.log(image); images[i].style.width = '500px'; images[i].style.height = '500px'; images[i].style.zIndex = '9999999999999999999999999'; images[i].style.border = '20px solid red'; } }

Collectives™ on Stack Overflow

Style a Specific Image

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Related