Brauche Hilfe mit getElementById(xyz).className

Es gibt 14 Antworten in diesem Thema. Der letzte Beitrag () ist von Samus Aran.

    Brauche Hilfe mit getElementById(xyz).className

    stuff.bubbelsearch.de/bubbel4/
    Bevor Sachen kommen wie "Der HTML-Code ist schlecht gemacht", die Seite liegt nicht ohne Grund unter der stuff-Subdomain :P
    Der Code sieht noch aus wie Clusterfuck, aber ich arbeite dran.
    Schaut euch die Seite übrigens nur mit nem HTML5-kompatiblen Browser wie z.B. Firefox 4 an, oder lasst es bleiben, weil ihr dann mein Problem nicht verstehen könnt.

    Jetzt zum Problem: Ich möchte via JavaScript das Farbschema der Seite anpassen (indem ich die border-color und box-shadow-Eigenschaften ändere).
    Wie ihr im Quellcode der Seite sehen könnt, versuche ich das via Javascript und den 6 Funktionen, die oben im Code definiert sind.
    Allerdings funktionieren diese Funktionen nicht (:P). Weiß jemand von euch, wieso?

    Also nach FireBug is die FF Fehlerconsole das wichtige Utensil beim Webseiten erstellen =)
    Leider versagt die Fehlerconsole bei asynconen Scripts wie z.B. AJAX, zumindest bei dem aktuellen FF 3.6 ob das im 4er funktioniert weiß ich nicht.

    Ich hab nochn Problem: Wenn ich die Farbe im Colorpicker auf der Seite ändere, und somit das onchange-Event auslöse, sollten sich eig. alle Farben auf der Seite verändern (Siehe changecolorscheme() und setStylebyClass()).
    Allerdings passiert nichts. Wieso? :(

    Also bei mir werden wieder einige JS Fehler bereits beim Ladne der seite ausgegeben und damit hängt schonmal das ganze JS normalerweise.

    Quellcode

    1. Fehler: missing ) after argument list
    2. Quelldatei: http://stuff.bubbelsearch.de/bubbel4/
    3. Zeile: 43, Spalte: 122
    4. Quelltext:
    5. setStyleByClass(*, 'normalbutton', 'box-shadow', 'inset rgba(' + r + ',' + g + ',' + b + ',1) 0px -1px 1px, rgba(' + r ',' + g + ',' b + ',.3) 0px 1px 5px;')
    7. Fehler: lightborder is not defined
    8. Quelldatei: http://stuff.bubbelsearch.de/bubbel4/
    9. Zeile: 1
    11. Fehler: defaultborder is not defined
    12. Quelldatei: http://stuff.bubbelsearch.de/bubbel4/
    13. Zeile: 1


    Ich würde mal sagen ohne weiter im Code nachzuforschen das genau dort ein Problem liegt, das einfach 2 undefinierte Variablen hast und vorallem einen Syntaxfehler beim setStyle dings.

    OK, durch den setStyle-Code steig ich absolut nicht durch, ich versuchs anders.

    Mit document.getElementById("searchbutton").style.borderColor = "#000"; kann ich ja die border-Color-Eigenschaft des Elements mit der ID "searchbutton" ändern.
    Wie mach ich das mit der searchbutton:hover-Pseudoklasse? Ich würde gerne die CSS-Eigenschaften der Hover/Active/Focus-Klassen ändern, das scheint aber nicht ohne Weiteres möglich zu sein.
    stackoverflow.com/questions/31…ass-rules-from-javascript

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Samus Aran“ ()

    Das kannst du nicht über den JS Namespace machen.

    Was bei deinem Code halt falsch ist, da fehlt halt irgendwo eine Klammer zu. Also ich würde es generell anders machen.

    Du gehst alle Elemente durch, in der Schleife kannst du dann über [HtmlElement].style.setAttribute("-webkit-opacity", "0.5");

    Die Transparenz will ich ja nicht verändern, nur die border und box-shadow-Eigenschaften in der :hover und :active-Pseudoklasse.
    Geht das nicht so, wies in dem Link in Post 7 steht?

    Edit: Blablabla ^^
    Ich hab jetzt ne PHP-Datei erstellt, die mir dynamisch ne CSS-Datei mit den benötigten Farben erstellt, und versuche jetzt, sie auf diesem Weg einzubinden und zu benutzen.
    Hört sich relativ einfach an, wenn ich jetzt noch in der Stylesheet-Definition im HTML-Code Parameter an die PHP-Datei übergeben kann, ist das perfekt.

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Samus Aran“ ()

    Das war ja auch nur ein Beispiel, das soll heißen JEDES Attribut was du in CSS angeben kannst, kannst du auch über setAttribute machen, aber eben nicht im style-Namespace, da sind nur die gängigsten Attribute wie display, color, background usw. drin enthalten.

    Mit insertRule() habe ich bisher noch nie gearbeitet, aber wenn es dort steht, probiers doch mal. Wobei es aussieht als ob das nur hinzugefügt wird und das ja nicht optimal, wen mehrere Male irgendeine Hover Klasse mit anderen Werten hinzugefügt wird.

    Mit PHP wäre auch eine möglichkeit, ist die Frage, wenn du neues Stylingsheet einbindest, mit AJAX, ob die Seite auch dann nochmal vom Browser neu geparsed wird.

    Wobei es aussieht als ob das nur hinzugefügt wird und das ja nicht optimal, wen mehrere Male irgendeine Hover Klasse mit anderen Werten hinzugefügt wird.

    Ist mir Sekunden, nachdem ich den Beitrag abgeschickt hab, auch aufgefallen, deshalb nutz ich jetzt notgedrungen PHP. :p

    So habs mal getestet, also mit AJAX und PHP solltest es hinbekommen wenn den neuen Styling einfach in das HTML Dokument einbindest.

    Probiert habe ichs mit dem Prototype Framework.

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Test</title>
    4. </head>
    5. <style type="text/css">
    6. html, body {
    7. background-color: #fe3462;
    8. color: #000;
    9. font-face: Verdana;
    10. }
    11. </style>
    12. <script src="prototype.js" type="text/javascript"></script>
    13. <script language="JavaScript" type="text/javascript">
    14. <!--
    15. function change() {
    16. new Ajax.Request("style.php?r=ff&g=00&b=ff", {
    17. onSuccess: function(transport) {
    18. $('styling').innerHTML = "<style type="text/css">" + transport.responseText + "</style>";
    19. }
    20. });
    21. }
    22. //-->
    23. </script>
    24. <body>
    25. <div id="styling"></div>
    26. <a href="javascript:change();">Ändern</a>
    28. </body>
    29. </html>


    style.php

    PHP-Quellcode

    1. html, body {
    2. background-color: #<?php echo $_GET['r'].$_GET['g'].$_GET['b']; ?>;
    3. font-size: 15pt;
    4. color: #fff;
    5. }

    PHP-Quellcode

    1. <?php
    2. header('Content-type: text/css');
    3. $r = $_GET["r"];
    4. $g = $_GET["g"];
    5. $b = $_GET["b"];
    6. ?>

    [...]

    PHP-Quellcode

    1. #searchbox:hover {
    2. border: solid 1px rgb(<?php echo $r ?>,<?php echo $g ?>,<?php echo $b ?>);
    3. box-shadow: rgba(<?php echo $r ?>,<?php echo $g ?>,<?php echo $b ?>,.6) 0px 1px 6px;
    4. }
    5. #searchbox:focus {
    6. border: solid 1px rgb(<?php echo $r ?>,<?php echo $g ?>,<?php echo $b ?>);
    7. box-shadow: rgba(<?php echo $r ?>,<?php echo $g ?>,<?php echo $b ?>,.9) 0px 1px 6px;
    8. }

    ^Auszüge aus meiner style.php

    Ich verstehe dein Beispiel nicht. Wofür ist die styling-div gut, wenn sie keine Objekte enthält? :/

    In diese DIV wird das Styling geladen, siehe diese Zeile vom AJAX Response

    HTML-Quellcode

    1. $('styling').innerHTML = "<style type="text/css">" + transport.responseText + "</style>";
    üder $() spricht man beim Prototype Framework HtmlElemente mit einer ID an, da spart man sich das document.GetElementByID().

    Ich hab deinen HTML-Code und die style.php mal hochgeladen: stuff.bubbelsearch.de/bubbel4/test/
    Allerdings ändert sich beim Klick die Schriftgröße. Warum das, ich änder die doch nirgendwo? ?(
    Hab nen Teil der HTML überlesen, hat sich geklärt, danke :)

    Edit: Nach mind. einem epischen Battle gegen Javascript und PHP (:B) funktioniert nun alles bei mir.
    stuff.bubbelsearch.de/bubbel4/ <--- Änder hier mal die Farbe im Colorpicker, schau zu, wie sich die Farben ändern, dann lad die Seite neu, lösch dann mal die Cookies und lad die Seite neu etc. :D
    Danke! :)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Samus Aran“ ()

Facebook
Telefonspende