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>
<h1>1te Überschrift</h1>
<h1>2te Überschrift</h1>
<div id="zeige"></div>
</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 

 

positive Bewertung({{pro_count}})
Beitrag bewerten:
{{percentage}} % positiv
negative Bewertung({{con_count}})

DANKE für deine Bewertung!


veröffentlicht am 08.09.2009 von Bernhard
geändert am 22.04.2020 von Bernhard



Kommentare


(sortiert nach Bewertung / Datum) [alle Kommentare(neueste zuerst)]
✍anonym
erstellt am 12.08.2010 15:08
User: RaV 
ich würde mal sagen , dir fehlt noch die css datei , da wird der style beschrieben ....

✍anonym
erstellt am 21.07.2010 14:07
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...

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Mehr Details