Hallo liebe Leute :),
Ich wollte mal nachfragen, ob es möglich ist, wenn ich z.B. jetzt einen Text geschrieben habe, diesen eine eigene ID zu geben?
Da ich den Text Variabel durch Javascript ersetzen will braucht der Text aber eine eigene ID damit ich es über das document.getElementById() abrufen kann.
Liebe Grüße
[...] ob es möglich ist,[...] einen Text [...] eine eigene ID zu geben? [...]
Das sollte kein Problem sein, wenn Du dazu einen einzelnen Textbereich benutzt und dem einen Namen gibst.
Als Ergebnis erhältst Du dann...
Danke für die Schnelle Antwort :)
Irgendwie verändert sich aber weder z.B. die Farbe noch der Text. Weiß aber auch nicht wieso es das nicht tut
[...] Irgendwie verändert sich aber weder z.B. die Farbe noch der Text. [...]
Nach der erschöpfenden Problembeschreibung bleibt mir nur der Griff zur Glaskugel und die kann ich gerade nicht finden... 😝
Vielleicht kannst Du Dein Problem auch so beschreiben, dass ein normal begabter Mensch damit etwas anfangen kann. 😍
Tut mir leid, wenn es komisch rüber kommen ist.
Also, ich habe eine Seite erstellt und benutze Variablen aus einer Java datei, damit es später super einfach ist, die Werte dort zu verändern, wie Links etc.. Wenn ich nun einen Platzhalter erstellt habe und dort mein eigenes HTML eingefügt habe, kann ich dort ja eine ID vergeben für die Objekte. Aber wenn ich nun in Magix Web Designer einen Text z.b. schreibe, dann kann ich diesem ja keine ID vergeben. Mit der Methode die du mir genannt hast, kann ich zwar einen Span hinzufügen mit einer ID, jedoch verändert diese nicht den Text an sich, sondern fügt lediglich einen weiteren Hinzu, wenn ich dies über die Variable ausführe. Ich habe auch mal ausprobiert, ob man die Text Farbe ändern kann, aber da ja lediglich ein weiterer Span hinzugefügt wird, hat meine Variabel keinerlei Effekt auf den Text, den ich über Magix Web Designer eingegeben habe.
Ich hoffe das war jetzt einigermaßen verständlich :)
Liebe Grüße
[...] hoffe das war jetzt einigermaßen verständlich [...]
Schon besser. 😋
Ideal wäre es gewesen, wenn Du ein Beispiel (Screenshot) Deines Vorhabens gepostet hättest, mit einem Demoscript...
Aber es geht auch so.
Schriftformatierungen können, wie Du wahrscheinlich weißt, mit HTML-, JavaScript- oder CSS gemacht werden.
Du möchtest JavaScript verwenden und stolperst aktuell über die ID Vergabe an ein span Objekt.
Eine mögliche Lösung ist die selektive Manipulation eines einzigen span Objekts. Das geht z. B. so:
<Script>
function changeText() {
var Tx = document.getElementsByTagName('span')[0];
Tx.style.fontSize= "25px" ;
Tx.style.color = 'orange';
Tx.style.fontWeight = "900";
}
</Script>
Damit werden genau einem span Objekt ("[0]") die in der Funktion genannten Eigenschaften "fontSize, color, fontWeight" zugewiesen.
Ist Dir die Suche nach dem Indexwert des span Objekts zu umständlich, kannst Du den zu formatierenden Text auch in eine DIV Box packen, der Du die gewünschte ID (hier "Textzeile") gibst.
Danach formatierst Du den Text mit der angepassten Funktion "changeText()":
<Script>
function changeText() {
var Tx = document.getElementById('Textzeile');
Tx.style.fontSize= "25px" ;
Tx.style.color = 'orange';
Tx.style.fontWeight = "900";
}
</Script>
Alternativ gibt es noch die Möglichkeit, dem zu formatierenden Text eine CSS Klasse zuzuweisen und darüber eine funktionsgesteuerte Formatierung zu veranlassen...
Beantwortet das Deine Frage?
--------------------------------------
Edit 01.02. - 23:46 h
Wie Du schon festgestellt hast, hat der WD die "Eigenart", bei der Zuweisung einer ID (per "Name") einfach ein neues span TAG anzulegen. Damit kann man natürlich nur arbeiten, wenn man den Quellcode der exportierten HTML Seite manuell nacharbeitet... 😑
Wenn man das macht, kann man es gleich richtig machen und die vorhandenen Strukturen für die eigenen Zwecke benutzen/umbauen.
In der hier beschriebenen Demo wird z. B. der Überschrift Text "Herzlich Willkommen" vom WD die CSS Klasse "xr_s2" zugewiesen. Das genügt uns um den Text für Manipulationen mit einer eigenen CSS Klasse zu identifizieren.
Mit dem folgenden JScript:
<script>
function changeTx() { // CSS Klasse zuweisen ein/aus
var elem = document.querySelectorAll('.xr_s2');
var index = 0;
length = elem.length;
for (index = 0; index < length; index++) {
elem[index].classList.toggle('TxForm');
}
}
</script>
weisen wir allen (Text) Objekten, denen der WD die Klasse "xr_s2" zugewiesen hat, unsere eigene Klasse "TxForm" zu, die dafür sorgt, dass der betroffene Text in Rot angezeigt wird.
Das JScript kopiert man am besten direkt in den HTML Head der Seite, ebenso wie den folgend CSS Code.
So sieht der dazu gehörende CSS Code aus:
<style>
.TxForm {
color: red;
}
</style>
In der HTML Datei präsentiert sich das so:
Der Link, der die Farbänderung (ein/aus) startet, wird so angelegt:
javascript:changeTx();
Und hier gibt's die übliche online Demo.
Zum Nachbau oder für eigene Experimente gibt's die lauffähige Projektdatei hier zum Download.