html-tips-tricks/data-attribute/index.html

38 lines
1.1 KiB
HTML
Raw Normal View History

2020-08-13 09:44:12 +02:00
<!DOCTYPE html>
2020-08-13 15:03:33 +02:00
<html>
2020-08-13 09:44:12 +02:00
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>HTML Tips and Tricks - Data Attribute</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
2020-08-14 05:44:20 +02:00
<link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet">
2020-08-13 09:44:12 +02:00
<link rel='stylesheet' type='text/css' media='screen' href='../main.css'>
<script>
function reveal() {
let dataDiv = document.getElementById('data-attr');
2020-08-13 15:03:33 +02:00
let value = dataDiv.getAttribute('data-custom-attr');
2020-08-13 09:44:12 +02:00
document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}
</script>
</head>
<body>
<div class="demo">
2020-08-14 07:00:23 +02:00
<a href="../index.html" class="home">
<img src="../home.svg" alt="home" />
</a>
2020-08-13 09:44:12 +02:00
<h2> Know data attribute </h2>
2020-08-13 15:03:33 +02:00
<div class="data-attribute" id="data-attr" data-custom-attr="You are just Awesome!"> I have a hidden secret!
</div>
2020-08-13 09:44:12 +02:00
<button onclick="reveal()">Reveal</button>
2020-08-13 15:03:33 +02:00
<br />
2020-08-13 09:44:12 +02:00
<p id="msg"></p>
</div>
2020-08-13 15:03:33 +02:00
</body>
</html>