In HTML the data attribute is used exclusively with the <object> tag.
Definition and Usage
➔ It specifies the URL of the resource (such as image, video, etc.) embedded by the object.
Syntax
//In HTML
<div>
<object id="sample" data="myimage.png" type="image/png" width="450" height="350"></object>
</div>
<div>
<object data="myimage.jpg" type="image/jpeg" width="450" height="250"></object>
</div>
<div>
<object data="myvideo.mp4" type="video/mp4" width="450" height="250"></object>
</div>
//In Javascript
<script>
//let element = document.getElementById("sample");
//element.data = "myimage.png"
//element.setAttribute("data", "myvideo.mp4");
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML data attribute example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML data attribute example</h3>
<p>data attribute specifies the URL of the resource to object tag.</p>
<div>
<object id="sample" data="myimage.png" type="image/png" width="450" height="350"></object>
</div>
<div>
<object data="myimage.jpg" width="450" height="250"></object>
</div>
<script>
// This anonymous function runs as soon as it's encountered.
(() => {
let element = document.getElementById("sample");
element.data = "./resources/images/workplace2.png";
//element.setAttribute("data", "./resources/images/workplace2.png");
})();
</script>
</body>
</html
Click on the "Try it Now" button to see how it works.