Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
Web Dev + WordPress + Security
eBook: WordPress Themes In Depth
WP Themes In Depth: Build and sell awesome WordPress themes.
Related Posts

Vanilla JavaScript: Add Class to Image Links

It seems that for every new web design, I need to add a specific CSS class to linked images. So I can distinguish between regular text links and image links. And then apply styles as desired for each. I’ve tried all sorts of CSS and JavaScript/jQuery tricks over the years, but so far this one is the best..

Of course, “best” is relative. For me, this snippet is great because it’s simple, lightweight, and written in vanilla JavaScript. So there are no dependencies.

Magic Bullet

Here is the magic code, strictly plug-&-play:

window.onload = function() {
	imageLinks();
}

function imageLinks() {
	var anchors = document.querySelectorAll('a');
	Array.prototype.forEach.call(anchors, function(a) {
		var img = a.querySelector('img');
		if (img !== null) {
			a.classList.add('img-link');
		}
	});
}

This snippet does one thing: adds a class named img-link to all links <a> that contain an image <img> element. Simply add the code and done.

After adding this code, any/all image links will include a class named img-link. Here is an example of the HTML output after applying the above snippet:

<a href="/path/to/somewhere/" class="img-link">
	<img src="/path/to/image.png" alt="">
</a>

So now we can add styles specifically to links that contain an image. For example:

.img-link { border: 1px solid gold; }
.img-link img { border: none; }

Let me know if you can find any way to improve this “magic bullet” vanilla JavaScript technique. Or maybe now it can be done with simple CSS..?

Jeff Starr
About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
Digging Into WordPress: Take your WordPress skills to the next level.

Leave a reply

Name and email required. Email kept private. Basic markup allowed. Please wrap any small/single-line code snippets with <code> tags. Wrap any long/multi-line snippets with <pre><code> tags. For more info, check out the Comment Policy and Privacy Policy.

Subscribe to comments on this post

Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Blackhole Pro: Trap bad bots in a virtual black hole.
Thoughts
DIY: Monitor File Changes via Cron working perfectly for over a decade.
Mastodon social is a trip. Glad I found it.
As a strict rule, I never use cache plugins on any of my sites. They cause more problems than they solve, imho. Just not worth it.
Currently on a posting spree :)
6 must come before 7.
My top three favorite-to-write coding languages: CSS, PHP, JavaScript.
If you’re not 100% sure that you can trust something, you can’t.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.