Beispiel:CSSOM-1.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:Grundlayout.css">
<title>Stylesheets ermitteln</title>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
const styleSheet = [];
const styleSheets = document.styleSheets;
for (let i = 0; i < styleSheets.length; i++) {
styleSheet.push(styleSheets[i]);
}
console.log(styleSheet);
});
</script>
<style>
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
margin: 2em;
width: 50%;
}
.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;
}
output {
font-family: monospace;
}
body {
margin: 2em auto;
padding: 0 2em;
font-size: 16px
}
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>Zugriff auf das CSSOM</h1>
<p>Dies ist ein Absatz mit einem span-Element. <span>Der Inhalt wird mit CSS ausgeblendet.</span></p>
<span>Dieses span-Element ist ein direktes Kind von body.</span>
<img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Symbolbild mit einer Toskana-Landschaft">
</body>
</html>
