SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:JS-element.offsetHeight.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">
<title>Elementgrößen ermitteln</title>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
const page = document.querySelector('body');
page.addEventListener('mouseover',getCSSValues);
page.addEventListener('focus',getCSSValues);
function getCSSValues(event) {
const element = event.target;
console.log(element.id + 'Breite: ' + element.offsetWidth + '\nHöhe: ' + element.offsetHeight);
const compStyles = window.getComputedStyle(element);
const pseudoCompStyles = window.getComputedStyle(element, 'first-letter');
let textsize = compStyles.getPropertyValue('font-size');
let textcolor = compStyles.getPropertyValue('color');
let msg = `Für das Pseudoelement sind die berechneten Werte für die Schriftgröße ${pseudoCompStyles.getPropertyValue('font-size')},\n` +
`für die Textfarbe: ${pseudoCompStyles.getPropertyValue('color')}.`;
document.getElementById('textsize').textContent = textsize;
document.querySelector('#textcolor .text').textContent = textcolor;
document.querySelector('#textcolor [role="decoration"]').style.backgroundColor = textcolor;
document.getElementById('msg').textContent = msg;
}
});
</script>
<style>
#aussen {
height: 20em;
width: 21em;
margin: 1em;
}
#innen1 {
width: 25em;
}
#innen2 {
width: 100%;
}
.box {
background-color: #f5e6bc;
border: 0.5em solid #337599;
color:#866a00;
padding: 1em;
}
.box > * {
background-color: #efd68f;
border: thin solid;
margin: 0;
}
.box p {
color: #866a00;
background-color: #efd68f;
border: thin solid;
border-bottom-color: transparent;
margin: 0;
line-height: 2;
}
aside p {
height: 7.5em;
border-top-color: transparent;
}
output {
font-family: monospace;
}
body {
margin: 2em auto;
padding: 0 2em;
}
main, #aussen {
border: thin dotted;
overflow: auto; /* muss gesetzt werden! */
resize: both;
}
footer {
color: white;
padding: 2em;
}
footer p {border-color:#866a00;padding:1em;}
#container {
display:grid;
grid-template-columns: 1fr 1fr;
gap; 1em;
border:thin dotted;
}
section {
grid-column: 1 /-!;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<h1 class="überschrift">Elementgrößen ermitteln<br>clientWidth + offsetWidth vs scrollWidth</h1>
<main id="container">
<div id="aussen">
<div id="innen1" class="box">
<p>Box, die kleiner als das Elternelement ist.</p>
<p><img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Symbolbild mit einer Toskana-Landschaft">
</div>
</div>
<div id="aussen">
<div id="innen2" class="box">
<p>Box, die sich an das Elternelement anpasst.</p>
<p><img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Symbolbild mit einer Toskana-Landschaft">
</div>
</div>
<section>
<h2 id="ausgabe">Ausgabe</h2>
<p>Schriftfarbe: <output id="textcolor"><span role="decoration" style="display:inline-block; width:1.25em; aspect-ratio:1; border:thin solid; margin-bottom:-0.25em;"></span><span class="text"> - </span></output></p>
<p>Schriftgröße: <output id="textsize">-</output></p>
<p><output id="msg">-</output></p>
</section>
</main>
<footer id="footer" class="box">
<p>made by <a class="externer link" href="https://selfhtml.org/">SELFHTML</a></p>
</footer>
</body>
</html>
