javascript und css kombinieren?
Ich will eine Stecknadel an der stelle setzen lassen wo man klickt weiß aber nicht wie ich meine x und y variablen in css einsetzen kann, oder gibt es einen weg css in js zu benutzen?
3 Antworten
Das style-Property liefert eine direkte Schnittstelle, um CSS-Styles via JavaScript zu setzen.
Beispiel:
<!doctype html>
<head>
<title>Example</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container"></div>
<script>
const container = document.getElementById("container");
container.addEventListener("click", evt => {
const point = document.createElement("div");
point.classList.add("point");
point.style.left = `${evt.clientX}px`;
point.style.top = `${evt.clientY}px`;
container.appendChild(point);
});
</script>
</body>
CSS:
#container {
border: 1px solid;
height: 300px;
position: relative;
}
.point {
border: 1px solid;
border-radius: 100%;
height: 10px;
position: absolute;
width: 10px;
}
Hier werden bei Klick in den Container div-Elemente erstellt, die absolut in Relation zum Container positioniert werden. Die Koordinaten werden dafür an die Properties left und top gegeben.
Ein anderer Weg wäre der über die Canvas API. Der hätte den Vorteil, nicht etliche Elemente bei Klick zu erzeugen.
<!doctype html>
<head>
<title>Example</title>
</head>
<body>
<canvas height="500" id="canvas" width="300"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const backgroundImage = new Image();
backgroundImage.src = "path/to/image";
backgroundImage.onload = () => context.drawImage(backgroundImage, 0, 0);
canvas.addEventListener("click", evt => {
const position = getMousePosition(canvas, evt);
context.fillStyle = "#000";
context.beginPath();
context.arc(position.x, position.y, 2, 0, 2 * Math.PI);
context.fill();
});
function getMousePosition(canvas, evt) {
const rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
</script>
</body>
In diesem Beispiel wird erst ein Bild auf die Zeichenfläche gezeichnet. Darüber kommen die Punkte, die bei Klick generiert werden. Statt Punkte könnte man natürlich auch Bilder zeichnen lassen (siehe drawImage).
Du kannst zwar mit JS nicht die CSS Datei ändern aber die Styles im HTML
Ich würde aber eher PHP verwenden.
Dann kannst du deine Werte auch richtig speichern.
Ein Beispiel für so eine Seite bei der eine Karte als SVG enthalten ist und die Bildauschnitte je nach Eingabe zur Laufzeit mit PHP geändert wird und die Markierungen dann dementsprechend positioniert werden ist:
Was soll da langsam sein und die Stecknadel soll ja wohl nicht aus Jux und tollerei gesetzt werden- nehme ich an.
Natürlich muss das Speichern auf dem Server sein.
Und was ist z.b. an der Seite Mindray2022.de langsam?
Man müsste natürlich genauer wissen was die Stecknadel den eigentlich soll und was der Fragestellerwirklich vor hat.
Mag ja sein, dass du die Umsetzung von der Seite toll findest aber sie ist unglaublich ineffektiv.
Mit jedem Click auf die Karte wird die Seite neu geladen. Das ist unnötig und langsam.
Schneller und moderner wäre eine Daten API, über die man sich dann per AJAX Request die Daten abholt, um dann Clientseitig die Karte entsprechend aufzuarbeiten
Du kannst die Mausposition mit Hilfe von JavaScript auslesen. Mit JavaScript kannst du über Selektoren dann die CSS Eigenschaften eines Elements ändern.
Eine PHP-Lösung ist denkbar ungeeignet, wenn es um eine Client-basierte Umsetzung geht.
Für PHP bist du immer auf einen Server angewiesen und da wirst du immer langsamer sein als mit einer ordentlichen JavaScript Lösung.