JavaScript Image Border
The old image border property reflects the obsolete HTML border attribute. It can appear in legacy code, but modern JavaScript should change the CSS border property instead.
const image = document.getElementById('i1');
image.style.border = '3px solid currentColor';
Table of Contents
Legacy image border property Top ↑
Older scripts used the numeric border property, for example:
document.getElementById('i1').border = '3';
That property is deprecated. Keep it only when understanding or maintaining historical code.
Add or remove a border with CSS Top ↑
const image = document.getElementById('i1');
image.style.border = '3px solid currentColor';
// Remove it later
image.style.border = '0';
CSS also lets you choose border style, color, radius, and responsive behavior without using obsolete image attributes.
Working demo Top ↑
Demo of adding or removing image border
Complete working source Top ↑
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add or remove an image border with JavaScript</title>
</head>
<body>
<img src="images/help.jpg" id="i1" alt="Help illustration">
<br><br>
<button type="button" id="add-border">Add Border</button>
<button type="button" id="remove-border">Remove Border</button>
<script>
const image = document.getElementById('i1');
const addButton = document.getElementById('add-border');
const removeButton = document.getElementById('remove-border');
addButton.addEventListener('click', () => {
image.style.border = '3px solid currentColor';
});
removeButton.addEventListener('click', () => {
image.style.border = '0';
});
</script>
</body>
</html>
Managing Alt tag of Image Image Object
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
