ein JavaScript Beispiel
Mit Javascript HTML Elemente ansprechen und manipulieren, ein einfaches Beispiel.
Ereignisse, wie beispielsweise das Bewegen der Maus über ein Element, setzen bestimmte Aktionen, wie beispielsweise das beschreiben eines <div> Elements
HTML Beispiel:
Ein ganz simple Webseite mit 2 Überschriften und einem DIV-Element:
<body><br /> <h1>1te Überschrift</h1><br /> <h1>2te Überschrift</h1><br /> <div id="zeige"></div><br /> </body>Der JavaScript- Teil
Der JavaScript-Block kann über eine eigene Datei eingebunden werden:
<script src="/js/app.js"></script> oder wie hier direkt in HTML:
<script>
window.document.getElementsByTagName("h1")[0].onmouseover=machwas
window.document.getElementsByTagName("h1")[1].onmouseover=machwas
function machwas(){
window.document.getElementById("zeige").innerHTML = this.innerHTML
}
</script>Beschreibung:
"window.document.getElementsByTagName("h1")[0].onmouseover" ist ein Event Listener der die Funktion "machwas" startet, wenn sich die Maus über der ersten Überschrift befindet. h1;
- window.document.getElementsByTagName("h1") wählt alle h1 Überschriften aus
- [0] wählt die erste Überschrift aus ...
- .onmouseover ist der Eventlistener
hier das vollständige Skript nochmal:
<body>
<h1>1te Überschrift</h1>
<h1>2te Überschrift</h1>
<div id="zeige"></div>
</body>
<script>
window.document.getElementsByTagName("h1")[0].onmouseover
=machwas;
window.document.getElementsByTagName("h1")[1].onmouseover
=machwas;
function machwas(){
window.document.getElementById("zeige").innerHTML = this.innerHTML;
}
</script> den Inhalt einfach in eine Textdatei mit Endung .htm und mit dem Browser öffnen, ähnlich dem jQuery Beispiel: jQuery start
({{pro_count}})
{{percentage}} % positiv
({{con_count}})
DANKE für deine Bewertung!
Fragen / Kommentare
(sortiert nach Bewertung / Datum) [alle Kommentare(neueste zuerst)]
User: ProMoe Bei mir funktioniert das nicht... er ändert zwar meine styles, die ich in der "machwas"-funktion definiert habe. Jedoch geschieht das, nicht wenn mit der Maus drüber fahr (onmouseover) sondern werden die styles mit dem laden der funtkion zugewiesen...
User: RaV ich würde mal sagen , dir fehlt noch die css datei , da wird der style beschrieben ....