CSS mit JS dynamisch ändern
- Themenstarter rernanded
- Beginndatum
Sempervivum
Erfahrenes Mitglied
Guten Morgen Moni,
das reine Setzen ist relativ einfach:
(ungetestet)
Da Du von einem Formular schreibst, vermute ich, dass die Werte nach Klick auf einen Submit-Button gesetzt werden sollen? Es wäre auch möglich, dass das sofort passiert, wenn ein Wert in einem der Eingabefelder geändert wird.
das reine Setzen ist relativ einfach:
Code:
const
val1 = document.getElementById('input1'),
val2 = document.getElementById('input2'),
val3 = document.getElementById('input3'),
val4 = document.getElementById('input4'),
style= `inset(${val1}px ${val2}px ${val3}px ${val3}px)`;
document.getElementById('das-element').style.clipPath = style;Da Du von einem Formular schreibst, vermute ich, dass die Werte nach Klick auf einen Submit-Button gesetzt werden sollen? Es wäre auch möglich, dass das sofort passiert, wenn ein Wert in einem der Eingabefelder geändert wird.
rernanded
Erfahrenes Mitglied
Hi sempervivum, Di weisst mein js ist "gruselig. ;-)
Soweit bin ich nun was aber -wie erwartbar- nicht funzt. MONI
Soweit bin ich nun was aber -wie erwartbar- nicht funzt. MONI
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
##cropped{
clip-path: inset(100px 1000px 10px 30px);
}
</style>
<script>
/*function crop(){*/
document.addEventListener('DOMContentLoaded', function crop() {
const
val1 = document.getElementById('input1'),
val2 = document.getElementById('input2'),
val3 = document.getElementById('input3'),
val4 = document.getElementById('input4'),
style= 'inset(${val1}px ${val2}px ${val3}px ${val3}px)';
document.getElementById('cropped').style.clipPath = style;
});
</script>
</head>
<body>
<form method="post" action="">
<input type="text" id="input1"><br />
<input type="text" id="input2"><br />
<input type="text" id="input3"><br />
<input type="text" id="input4"><br />
<input type="submit" value="los" onclick="crop();">
</form>
<img id="cropped" src="banner-bk.jpg" />
</body>
</html>Sempervivum
Erfahrenes Mitglied
Das kommt davon, wenn man es nicht testet: Beim Lesen der Werte aus den Eingabefeldern hatte ich das
Außerdem wird beim Drücken des Submitbuttons das Formular abgeschickt, so dass die Seite neu geladen wird. Das müssen wir durch event.preventDefault unterbinden.
So funktioniert es dann:
Jetzt wäre es noch schön wenn die Variablennamen valx das wiedergeben würden, was drin steht, wenn Du möchtest, kannst Du das selbst noch ändern.
.value vergessen. Und Du hast nicht bemerkt, dass es sich bei den Hochkommas bei der Zuweisung auf style um die Rückwärtsversion handelt, ` statt '.Außerdem wird beim Drücken des Submitbuttons das Formular abgeschickt, so dass die Seite neu geladen wird. Das müssen wir durch event.preventDefault unterbinden.
So funktioniert es dann:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Crop Image</title>
<style>
#cropped {
clip-path: inset(100px 100px 10px 30px);
}
</style>
</head>
<body>
<form method="post" action="">
<input type="text" id="input1" value="50"><br />
<input type="text" id="input2" value="50"><br />
<input type="text" id="input3" value="50"><br />
<input type="text" id="input4" value="50"><br />
<input type="submit" value="los" onclick="crop(event);">
</form>
<img id="cropped" src="images/dia0.jpg" />
<script>
function crop(event) {
event.preventDefault();
const
val1 = document.getElementById('input1').value,
val2 = document.getElementById('input2').value,
val3 = document.getElementById('input3').value,
val4 = document.getElementById('input4').value,
style = `inset(${val1}px ${val2}px ${val3}px ${val3}px)`;
document.getElementById('cropped').style.clipPath = style;
}
</script>
</body>
</html>rernanded
Erfahrenes Mitglied
Hi sempervivum,
alles klar. Es funktioniert.
Und doch hast Du meinen Fehler übersehen da ich 2mal ${val3} benutzt habe. Daran bin ich nämlich gerade noch verzweifelt ...
;-)))
Danke sehr.
Den Vorschlag mit der Wiedergabe von valx löse ich selbst. Das ist kein Problem.
MONI
alles klar. Es funktioniert.
Und doch hast Du meinen Fehler übersehen da ich 2mal ${val3} benutzt habe. Daran bin ich nämlich gerade noch verzweifelt ...
;-)))
Danke sehr.
Den Vorschlag mit der Wiedergabe von valx löse ich selbst. Das ist kein Problem.
MONI
