Auf Felder zugreifen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Auf Felder zugreifen

    Hallo zusammen,

    Ich spiele mich gerade ein bisschen mit der Manipulation mittels Javascript. Ich versucche verschiedene Texte innerhalb eines DIVS von der Schriftgöße/Art zu ändern.

    Mein bisheriges Script funktioniert schon, allerdings kann man das sicherlich optimieren, derzeit habe ich für jedes DIV eine eigene Funktion, das ginge doch aber sicher auch wenn ich dem Formular welches die Änderungen auslöst mitgebe für welches DIV die Änderung gilt, oder?

    JS Part:

    Quellcode

    1. function changeFont(str)
    2. {
    3. document.getElementsByName("demo")[0].style.fontFamily = str;
    4. }
    5. function changeSize(str)
    6. {
    7. document.getElementsByName("demo")[0].style.fontSize = str;
    8. }
    9. function changeFont1(str)
    10. {
    11. document.getElementsByName("demo1")[0].style.fontFamily = str;
    12. }
    13. function changeSize1(str)
    14. {
    15. document.getElementsByName("demo1")[0].style.fontSize = str;
    16. }
    17. function changeFont2(str)
    18. {
    19. document.getElementsByName("demo2")[0].style.fontFamily = str;
    20. }
    21. function changeSize2(str)
    22. {
    23. document.getElementsByName("demo2")[0].style.fontSize = str;
    24. }
    Alles anzeigen


    Style Part

    Quellcode

    1. div#jetscram{ background-color:#ffffff; border:1px black solid; font-family:Helvetica, Arial, sans-serif; color:black; height:28px; padding-left:25px; padding-top:12px; z-index:5; margin-bottom:5px; width:400px;}
    2. #jetscram select{ width:120px;}
    3. * HTML div#jetscram{ margin-left:0px;}


    HTML Part

    Quellcode

    1. TAG 1
    2. <div id="jetscram">
    3. Font <select name="fontchange" onchange="changeFont(this.value)">
    4. <option value=""Gill Sans MT", Gill Sans, Gill,Arial, Sans" selected="selected">Gill Sans MT</option>
    5. <option value="Arial, Sans">Arial</option>
    6. <option value="Verdana, Sans">Verdana</option>
    7. <option value="Helvetica,"Helvetica LT", Sans">Helvetica</option>
    8. <option value="Georgia, Sans">Georgia</option>
    9. </select>
    10. Font Size
    11. <select name="fontsize" onchange="changeSize(this.value)">
    12. <option value="12px">12</option>
    13. <option value="13px">13</option>
    14. <option value="14px">14</option>
    15. <option value="15px">15</option>
    16. <option value="16px" selected="selected">16</option>
    17. <option value="18px">18</option>
    18. </select>
    19. </div>
    20. TAG2
    21. <div id="jetscram">
    22. Font <select name="fontchange" onchange="changeFont1(this.value)">
    23. <option value=""Gill Sans MT", Gill Sans, Gill,Arial, Sans" selected="selected">Gill Sans MT</option>
    24. <option value="Arial, Sans">Arial</option>
    25. <option value="Verdana, Sans">Verdana</option>
    26. <option value="Helvetica,"Helvetica LT", Sans">Helvetica</option>
    27. <option value="Georgia, Sans">Georgia</option>
    28. </select>
    29. Font Size
    30. <select name="fontsize" onchange="changeSize1(this.value)">
    31. <option value="12px">12</option>
    32. <option value="13px">13</option>
    33. <option value="14px">14</option>
    34. <option value="15px">15</option>
    35. <option value="16px" selected="selected">16</option>
    36. <option value="18px">18</option>
    37. </select>
    38. </div>
    39. TAG 3
    40. <div id="jetscram">
    41. Font <select name="fontchange" onchange="changeFont2(this.value)">
    42. <option value=""Gill Sans MT", Gill Sans, Gill,Arial, Sans" selected="selected">Gill Sans MT</option>
    43. <option value="Arial, Sans">Arial</option>
    44. <option value="Verdana, Sans">Verdana</option>
    45. <option value="Helvetica,"Helvetica LT", Sans">Helvetica</option>
    46. <option value="Georgia, Sans">Georgia</option>
    47. </select>
    48. Font Size
    49. <select name="fontsize" onchange="changeSize2(this.value)">
    50. <option value="12px">12</option>
    51. <option value="13px">13</option>
    52. <option value="14px">14</option>
    53. <option value="15px">15</option>
    54. <option value="16px" selected="selected">16</option>
    55. <option value="18px">18</option>
    56. </select>
    57. </div>
    58. <div id="lal" name="demo">Hallo Frau Hase</div><br>
    59. <div id="lal" name="demo1">OllaFrau Hase</div>
    60. <div id="lal" name="demo2">OllaFrau Hase</div>
    Alles anzeigen


    Was ich gerne möchte ist das ich nur noch einen Select part habe wo ich fontsize/font auswähle, und dann eben eine zusätzlich dropdown darin für welches DIV der gelten soll, wer kann mir dabei helfen?

    Danke und Gruß,
    Matthias
    Das Leben ist binär - du bist eine 1, oder eine 0
  • Hi Nippel,

    Danke für deinen Denkanstoß - ich habe es nun folgendermaßen gelöst da ja der DIV dynamisch (dropdown) sein soll, passt das dann so, oder gibt es da noch ne "bessere" Methode?

    Quellcode

    1. function changeTag(tag1)
    2. {
    3. tag = tag1;
    4. }
    5. function changeFont(str)
    6. {
    7. document.getElementsByName(tag)[0].style.fontFamily = str;
    8. }
    9. function changeSize(str)
    10. {
    11. document.getElementsByName(tag)[0].style.fontSize = str;
    12. }
    Alles anzeigen


    Quellcode

    1. TAG<select name="fontchange" onchange="changeTag(this.value)">
    2. <option value="demo">TAG 1</option>
    3. <option value="demo1">TAG 2</option>
    4. <option value="demo2">TAG 3</option>
    5. </select>
    6. Font <select name="fontchange" onchange="changeFont(this.value)">
    7. <option value=""Gill Sans MT", Gill Sans, Gill,Arial, Sans" selected="selected">Gill Sans MT</option>
    8. <option value="Arial, Sans">Arial</option>
    9. <option value="Verdana, Sans">Verdana</option>
    10. <option value="Helvetica,"Helvetica LT", Sans">Helvetica</option>
    11. <option value="Georgia, Sans">Georgia</option>
    12. </select>
    13. Font Size
    14. <select name="fontsize" onchange="changeSize(this.value)">
    15. <option value="12px">12</option>
    16. <option value="13px">13</option>
    17. <option value="14px">14</option>
    18. <option value="15px">15</option>
    19. <option value="16px" selected="selected">16</option>
    20. <option value="18px">18</option>
    21. </select>
    Alles anzeigen


    Gruß,
    Matthias
    Das Leben ist binär - du bist eine 1, oder eine 0