Beispiel:JS-element.getAttribute.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<link rel="stylesheet" href="CSS/Grundlayout.css" >
<title>Element.getAttribute</title>
<style>
div {
width: 20em;
height:10em;
float: right;
background-color: #fffbf0;
border: 2px dotted #e7c157;
}
#ausgabe {
color: #c32e04;
font-weight: bold;
padding: 0.2em 1em;
background-color: #fffbf0;
border: 2px dotted #e7c157;
}
li {width: 6em;}
ul {width: 10em;}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
var seite = document.querySelector('body');
seite.addEventListener('mouseover',findeAttribut);
seite.addEventListener('click',findeAttribut);
function findeAttribut(event) {
var text = event.target.getAttribute ('class');
if (text == ''){
text ='keine Klasse vergeben!';
}
document.getElementById('ausgabe').textContent = text;
}
});
</script>
</head>
<body id="seite">
<h1 class="überschrift">Element.getAttribute</h1>
<main>
<h2 class="hauptteil">Überschrift</h2>
<p class="hinweis">Bewegen Sie die Maus über die Seite / klicken Sie irgendwo auf die Seite.</p>
<div class="seitenbox"></div>
<ul class="Einkaufsliste">
<li class="morgen">Pizza</li>
<li class="immer">Pasta</li>
<li class="heute">Prosciutto</li>
</ul>
<ol class="Lieblingsessen">
<li class="eins">Pizza</li>
<li class="zwei">Pasta</li>
<li class="drei">Prosciutto</li>
</ol>
<p>Klassenname: <output id="ausgabe">-</output></p>
<footer class="unten">made by <a class="externer link" href="https://selfhtml.org/">Selfhtml</a></footer>
</main>
</body>
</html>
