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 

 

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

DANKE für deine Bewertung!

Fragen / Kommentare

(sortiert nach Bewertung / Datum) [alle Kommentare(neueste zuerst)]

✍anonym
21.07.2010 12:41 
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...

✍anonym
12.08.2010 13:14 
User: RaV 
ich würde mal sagen , dir fehlt noch die css datei , da wird der style beschrieben ....