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:Visibility hidden vs display none.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de"> 
	<head> 
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet"  media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" >
  <title>visibility:hidden vs. display:none</title>
<style>
li {
	border: thin solid #dfac20;
	border-radius: 0.75em;
	background: #ffebd2;
	padding: 0.5em;
	margin-bottom:1em;
}
a {
	display:inline-block; 
	color: steelblue;
	background: #d2e1ea;
	border: thin solid;
	border-radius: 0.5em;
	padding: 0.5em;
	width: 9em;
	visibility: visible;
	opacity: 1;
}

body {
	display: grid;
	grid-template-columns: 15em 19em;
	gap: 1em;
}	
h1,p {
	grid-column: 1/-1;
}
#controls {
	border: thin dotted steelBlue; 
	
	button {
		width: 10em; 
		margin: .5em;
		display: block;
	}
}

  </style>
 <script>
document.addEventListener("DOMContentLoaded", () => {
    const controls = document.getElementById("controls");
    const secondLi = document.querySelector("ul li:nth-child(2)");
    const result = document.getElementById("result");
    
    controls.addEventListener("click", (event) => {
        if (event.target.tagName === "BUTTON") {
            // Reset all styles before applying new one
            secondLi.style.display = "";
            secondLi.style.opacity = "";
            secondLi.style.visibility = "";
            
            let style = event.target.textContent;
            
            switch (style) {
                case "normal":
                    result.textContent = "Alle Absätze sind sichtbar";
                    break;
                case "display: none":
                    secondLi.style.display = "none";
                    result.textContent = "2. Absatz ist ausgeblendet (display: none)";
                    break;
                case "opacity: 0":
                    secondLi.style.opacity = "0";
                    result.textContent = "2. Absatz ist unsichtbar (opacity: 0)- Link bleibt aktiv! Kindelement kann nicht sichtbar gemacht werden!";
                    break;
                case "visibility: hidden":
                    secondLi.style.visibility = "hidden";
                    result.textContent = "2. Absatz ist versteckt (visibility: hidden) - Kindelement kann sichtbar gemacht werden!";
                    break;
            }
        }
    });
});
</script>
</head>

<body>
  <h1>visibility:hidden vs. display:none</h1>
<div id="controls">
	<button>normal</button>
	<button>display: none</button>
	<button>opacity: 0</button>  
	<button>visibility: hidden</button>
</div>

<ul>
  <li>1. Absatz 
  		<a href="https://selfhtml.org">SELFHTML Wiki</a>
  </li>
  <li>2. Absatz 
  		<a href="https://forum.selfhtml.org">SELFHTML Forum</a>
  </li>
  <li>3. Absatz 
  		<a href="https://blog.selfhtml.org/">SELFHTML Blog</a>
  </li>
</ul>	 

<p id="result"></p>   

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Visibility_hidden_vs_display_none.html&oldid=102416“