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

tavkomann

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

29.05.2018, 19:53

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/

Primaro

Fragesteller

29.05.2018, 19:54

Viel Dank, das hilft mir gerade sehr weiter

tavkomann

29.05.2018, 19:55

@Primaro

Gerne.

Primaro

Fragesteller

29.05.2018, 19:59

@tavkomann

Könntest du das bite nochmal mit der class erklären?

Das habe ich nicht ganz verstanden

tavkomann

29.05.2018, 20:09

@Primaro

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.

Primaro

Fragesteller

29.05.2018, 20:12

@tavkomann

Was ist, wenn ich der schrift schon eine Klasse gegeben habe?

Kann ich da noch ein Div hinzufügen?

tavkomann

29.05.2018, 20:16

@Primaro

Wie sieht dein Code bisher aus?

Primaro

Fragesteller

29.05.2018, 20:38

@tavkomann

<!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>

var x=

document.getElementById("schrift");

x.style.filter="0px";

</script>

</head>

<body>

Der Buddhismus

</center>

</div>

</center>

Eine Religion ohne Gott

</div>

</center>

</a>

</div>

</body>

</html>

Die Überschrift soll dann per Klick sichtbar werden

tavkomann

29.05.2018, 20:46

@Primaro

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.

Erzesel

29.05.2018, 20:54

@Primaro

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

Primaro

Fragesteller

29.05.2018, 20:55

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

tavkomann

29.05.2018, 20:55

@Primaro

Kein Problem ;)

Wie bekomme ich diesen Parallax Scrolling Effekt

https://www.youtube.com/watch?v=TawH-AqHTXc

Meine Umsetzung: https://codepen.io/MrAmazing2/pen/dyMByNr

mit purem CSS hin??

Denn die JavaScript Version ist oft sehr ruckelig, da JS Asynchron läuft. Mit purem CSS wäre es aber immer flüssig. (Quelle)

Ich bin bereits auf das hier gestoßen: https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

Jedoch schaffe ich es nicht, das ganze in ein Div zu packen, und darunter weitere Divs/Sections zu plazieren, sodass es aussieht wie in meiner Demo. Stattdessen überlappt es sich, oder der Parallax-Part bekommt eine extra Scrollbar.

Sitze nun schon seit 15 Stunden daran und schaffe es einfach nicht. Bin aber auch CSS Neuling.

...zur Frage

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zur Frage

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zur Frage

CSS height and max gleichzeitig?

Hallo,

Ich habe einem Div-Element gesagt, dass es eine Breite von 40% und eine Höhe von 100% haben soll, aber der nutzt jetzt irgendwie nur die Breite, und nicht die höhe. Woran kann das liegen?

...zur Frage

Mindmap mit CSS/HTML/Javascripterstellen?

Hey,

Ich suche einen möglichst

einfachen Weg, eine Mindmap, wie auf dem eingefügten Foto, mit Hilfe von HTML und CSS oder auch Javascript zu bauen. Ich bin im Internet zum Thema nicht ziemlich fündig geworden und bin etwas ahnungslos wie ich das ganze angehen könnte. Daher wäre es hilfreich, wenn ihr mir sagt, mit welchen Elementen ich arbeiten und wie ich richtig an die Sache rangehen sollte. Ich hatte erst gedacht, von der Div-Box einfach diese "----" Striche mit white-space:nowrap; zu schreiben und dann mit transform:rotate(70deg) zu drehen und anschließend mit overflow-x:hidden; eine Seite zu verstecken, sodass nur noch eine Sichtbar ist, an die ich dann vorhatte, irgendwie eine Div-box für die Fakten anzuhängen. Allerdings klingt das etwas irrsinnig, hättet ihr daher Ideen?

So sollte das ganze nachher aussehen :)

...zur Frage

Daten aus MySQL auf Website darstellen?

Ich habe Daten in einer MySQL Datenbank, die ich gerne auf einer Website darstellen möchte, jeweils immer beim Klick auf einen Button (pro Button eine etwas andere Abfrage)

Eine entsprechende Abfrage dafür wird in JavaScript bereits erstellt.

Jetzt müssen die Daten nur noch abgerufen und eingefügt werden. - Nach allem, was ich gelesen habe, soll es sehr umständlich sein, MySQL in JavaScript zu verbinden.

Bisher habe ich probiert, die Abfrage per Cookie in PHP zu übertragen, dort die Daten abzufragen und zu echoen - das ganze mit einem getElementById().innervalue = ..., sodass immer die aktuelle Abfrage im DOM-Element ist, das passiert aber nur beim ersten Mal.

Das Abfragen der Daten in PHP und Zurückgeben an JS hat weder über einen Cookie, noch ein echo funktioniert.

...zur Frage

NavBar auf jeder Unterseite einbauen (Webdevelopment)?

Hallo, es gibt auf so ziemlich jeder Website Elemente, die auf fast jeder Unterseite vorkommen. Ein Beispiel dafür wäre die NavBar. Diese ist bei den meisten Websites überall. Wie bringt man aber dieses Element auf jede Unterseite? Bei jeder Unterseite den ganzen HTML, CSS und JavaScript Code reinzukopieren wäre ja sehr mühsam.

Diese Aufgabe kann man mit Framworks lösen, wie z.B. VueJS wo man Komponenten verwendet. Welche Methoden gibt es sonst noch, vielleicht sogar ganz ohne Framework?

...zur Frage

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zur Frage

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zur Frage

HTML/CSS Kreis Animation um Element bei Klick?

Hey, ihr kennt doch sicherlich die Animationen die Google verwendet. Ihr klickt auf einen Button und um den Button bildet sich ein Kreis beim Klick (Animation). Ich weiß, etwas Blöd erklärt aber falls ihr nicht versteht was ich meine, habe ich euch ein Bild da gelassen. Wir bekomme ich das mit HTML/CSS hin?

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

javascript -webkit-scrollbar check in welchem div man ist?

Hey,

Ich versuche eine Website wie Tiktok zu programmieren und habe jetzt programmiert, dass man runterscrollen kann und dann ein neues Video kommt.
Das habe ich 100% nur mit HTML und CSS gemacht, aber jetzt will ich in Javascript ein Check einführen, welches Video man gerade anschaut.

dashboard.php:

player.css:

Kann mir wer helfen?

...zur Frage

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zur Frage

CSS den Text über blur effekt?

Also der body soll verschwommen sein aber nicht der div

(oder nur der div Text).

Hab es schon mit z-index versucht

 <style>
        body{
            filter: blur(5px);
            position: relative;
            z-index: -10;
        }
        div{
            font-size: xx-large;
            filter: blur(0px);
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        Hallo
    </div>
</body>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen