Blur mit Javascript entfernen?
Ich habe ein div Element mit CSS "geblurt". Jetzt würde ich den Blur Effekt gerne mittels Javascript mit einem Klick entfernen, sodass man den Text wieder einwandfrei lesen kann. Wie Stelle ich das an?
1 Antwort
Am besten nutzt du dafür Klassen, welche du einfach mit JavaScript entfernst oder hinzufügst:
<button onclick="document.getElementById('blurredText').classList.remove('blur');">Text anzeigen</button>
<p id="blurredText" class="blur">Text</p>
Live-Beispiel: https://jsfiddle.net/mpnj6my9/
Jedes Element mit der Klasse „blur“ wird verwischt dargestellt. So wurde es durch den CSS-Code definiert. Wenn du auf den Button klickst, wird vom Element mit der ID „blurredText“ die Klasse „blur“ entfernt. Daher trifft der CSS-Code nicht mehr auf dieses Element zu, weil das Element schließlich nicht mehr die Klasse „blur“ besitzt. Aus diesem Grund wird der Text nach einem Mausklick nicht mehr verwischt angezeigt.
Was ist, wenn ich der schrift schon eine Klasse gegeben habe?
Kann ich da noch ein Div hinzufügen?
<!DOCTYPE HTML>
<html>
<head>
<title>
Buddhismus
</title>
<style>
body{
background-color: #A9BCF5;
}
#schrift {
font-size: 60px;
font-style: oblique;
font-weight: bolder;
background-color: white;
width:500px;
margin-left: auto;
margin-right: auto;
border-radius: 250px;
border: 5px solid lightgrey;
filter: blur(10px);
}
.Unterüberschrift {
font-size: 30px;
width: 400px;
border-radius: 200px;
background-color: lightgrey;
border: 5px solid grey;
}
.Weiter {
top: 500px;
left: 750px;
position: fixed;
}
</style>
<script>
var x=
document.getElementById("schrift");
x.style.filter="0px";
</script>
</head>
<body>
<div id="schrift">
<center>
Der Buddhismus
</center>
</div>
<center>
<img src="Buddah_Stein_Statue.png" alt="Buddah">
</center>
<center>
<div class="Unterüberschrift">
Eine Religion ohne Gott
</div>
</center>
<div class="Weiter">
<a href="html11Vortragreligion2.html">
<img src="Untitled2.png" alt="Weiter">
</a>
</div>
</body>
</html>
Die Überschrift soll dann per Klick sichtbar werden
Beachte zunächst, dass das center-Tag mittlerweile deprecated, d. h. veraltet ist. Nutze für das Layout ausschließlich CSS. Im Wesentlichen ist der relevante Code nun folgender:
<div id="schrift">Der Buddhismus</div>
Dies änderst du einfach um in:
<div id="schrift" class="blur">Der Buddhismus</div>
Im CSS-Code entfernst du die Zeile, in der du den Text verwischst, und fügst stattdessen Folgendes ein:
.blur {
filter: blur(10px);
}
Bleibt nur noch ein Button und dann kann das Ganze beispielsweise so aussehen: https://jsfiddle.net/4yae1s8t/
Entferne aber wirklich diese center-Tags und vermeide Umlaute.
Was ist, wenn ich der schrift schon eine Klasse gegeben habe?
dann kanst du auch eine andere Klasse zuweisen:
Was ist, wenn ich der schrift schon eine Klasse gegeben habe?
document.getElementById('mydiv').className = 'newClass';
du kannst auch eine neue klasse zur alten hizufügen
document.getElementById('mydiv').className += ' newClass';
//oder:
document.getElementById('mydiv').classList.add("newClass");
das Ergebnis wäre dann etwa das:
<div id="mydiv" class="oldclass newclass">text</div>
statt .add geht auch toggle remove contain....
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
ja das mit den Center Tags mache ich nur so, weil es nichts wichtiges ist, sonst würde ich das auch mit CSS machen. Und das mit den Umlauten passt schon, wie gesagt es ist nichts wichtiges. ich benutze das für eine Präsentation und daher öffne ich das nur mit meinem Laptop und Chrome. aber vielen vielen Dank für deine Hilfe. ich glaube ohne dich wäre ich nicht weitergekommen. Danke