HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ Text ändern ] [ Text selektieren ]

Text ändern

Mit Hilfe von getElementsByTagName kann auf HTML-Elemente zugegriffen werden und mit firstChild.data kann der Text geändert werden.

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Test</title>
   <meta charset="utf-8">
   <script>
    function neuerText () {
     document.getElementsByTagName("h1")[0].firstChild.data = 
       "Die geänderte Überschrift" ;
     document.getElementsByTagName("p")[0].firstChild.data = 
       "Der erste Absatz ist geändert" ;
     document.getElementsByTagName("p")[1].firstChild.data = 
       "Der zweite Absatz ist geändert" ;
     document.getElementsByTagName("p")[2].firstChild.data = 
       "Der dritte Absatz ist geändert" ;
    }
   </script>
  </head>
  <body>
   <h1>Die erste Überschrift</h1>
   <p>Der erste Absatz</p>
   <p>Der zweite Absatz</p>
   <p>Der dritte Absatz</p>
   <p><a href="javascript:neuerText()">Text ändern</a></p>
  </body>
  </html>
Das ganze sieht so aus

Text selektieren

Um einen selektierten Text auszulesen, kann folgender Script benutzt werden. Da einige Browser unterschiedliche Befehle beherschen, wird mit if ... else geprüft, welchen Befehl der Browser kennt.

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Test</title>
   <meta charset="utf-8">
   <script>
    function selektieren () {
     if (window.getSelection) {
        alert(window.getSelection());
     } else if (document.getSelection) {
        alert(document.getSelection());
     } else if (document.selection) {
        alert(document.selection.createRange().text);
     }
    }
   </script>
  </head>
  <body>
  <p>Markieren Sie etwas aus diesem Text und drücke den Button.</p>
  <form>
   <input type="button" value="Ausgabe" onmousedown="selektieren();">
  </form>
  </body>
  </html>
Das ganze sieht so aus

back top next