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!


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 ....