Anzeige

Javascript Script vereinfachen/verallgemeinern

Javascript Script vereinfachen/verallgemeinern | PSD-Tutorials.de

Erstellt von Coulyo, 12.08.2013.

  1. Coulyo

    Coulyo Director

    Dabei seit:
    04.06.2012
    Beiträge:
    70
    Geschlecht:
    männlich
    Ort:
    Flensburg
    Software:
    Photoshop, After Effects, Premiere, Blender
    Kameratyp:
    5D Mark III
    Javascript Script vereinfachen/verallgemeinern
    Hallo,

    ich habe vor kurzem angefangen mich mit Javascript zu beschäftigen und habe nun mein erstes eigenes Script geschrieben. Ich ändere damit das Farb-Schema meiner Website. Das ganze funktioniert auch ganz gut, allerdings denke ich, dass man es noch wesentlich verbessern könnte, indem man die Funktion allgemein gestaltet, um das Script auch in zukünftigen Projekten verwenden zu können.
    Ich könnte aus dem unten stehenden Code 3 oder 4 allgemeine Funktionen machen, um jeden Fall abzudecken. Das hätte dann aber den Nachteil, dass ich um das Farbschema anzupassen, alle diese Funktionen aufrufen müsste, anstatt nur die Funktion changeColor().
    Ich würde das Script also gerne so umschreiben, dass der Methode changeColor() entweder ein Class Name oder ein Tag Name übergeben wird. Dann müsste ja geprüft werden, was der Methode als Parameter übergeben wurde und davon ausgehend möchte ich dann in der Funktion weitere Abfragen machen im Stil von:

    wenn class xy das BackgroundImage grau90.png hat, dann änder das bitte in weiß90.png

    Oder equivalent mit der Schriftfarbe.

    So, nun hab ich aber keine Ahnung, wie ich das zu Stande bringe. Aus Java ist mir das überladen von Methoden bekannt, mit dem man ja zumindest das Übergeben verschiedener Parametertypen an die Funktion lösen könnte (auch wenn es dann faktisch trotzdem mehrere Funktionen mit dem selben Namen wären), allerdings weiß ich nicht, ob sowas auch in Javascript geht.
    Zweitens weiß ich nicht wie man oben genannte Abfrage für das Hintergrundbild, oder die Schriftfarbe, oder eine beliebige andere Eigenschaft im Code formuliert.

    Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt und irgendjemand kann mir helfen! Ich bin mir ziemlich sicher, dass das Problem für Kenner ein Klacks ist, aber als Anfänger ... :D

    Danke schonmal! :)

    Code (Text):
    1. <script type="text/javascript">
    2.    
    3.     var change = 0;
    4.    
    5.     function changeColor(){
    6.        
    7.         if(change == 0){
    8.            
    9.         for (var i = 0; i < document.getElementsByTagName("div").length; i++){
    10.             document.getElementsByTagName("div")[i].style.backgroundImage = "url('img/weiß90.png')";
    11.         }
    12.         for (var i = 0; i < document.getElementsByClassName("navigation").length; i++){
    13.             document.getElementsByClassName("navigation")[i].style.backgroundImage = "url('img/weiß90.png')";
    14.         }
    15.         for (var i = 0; i < document.getElementsByClassName("navLink").length; i++){
    16.             document.getElementsByClassName("navLink")[i].style.color = "#000";
    17.         }
    18.         for (var i = 0; i < document.getElementsByClassName("navLinkSub").length; i++){
    19.             document.getElementsByClassName("navLinkSub")[i].style.backgroundImage = "url('img/weiß90.png')";
    20.             document.getElementsByClassName("navLinkSub")[i].style.color = "#333";
    21.         }
    22.         for (var i = 0; i < document.getElementsByClassName("divider").length; i++){
    23.             document.getElementsByClassName("divider")[i].style.backgroundImage = "none";
    24.         }
    25.         for (var i = 0; i < document.getElementsByClassName("blogHeading").length; i++){
    26.             document.getElementsByClassName("blogHeading")[i].style.backgroundImage = "none";
    27.         }
    28.         for (var i = 0; i < document.getElementsByTagName("p").length; i++){
    29.             document.getElementsByTagName("p")[i].style.color = "#333";
    30.         }
    31.         for (var i = 0; i < document.getElementsByTagName("span").length; i++){
    32.             document.getElementsByTagName("span")[i].style.color = "#333";
    33.         }
    34.        
    35.         for (var i = 0; i < document.getElementsByClassName("datumLarge").length; i++){
    36.             document.getElementsByClassName("datumLarge")[i].style.backgroundImage = "none";
    37.         }
    38.         for (var i = 0; i < document.getElementsByClassName("date").length; i++){
    39.             document.getElementsByClassName("date")[i].style.color = "#FFF";
    40.         }
    41.        
    42.         change = 1;
    43.         }
    44.        
    45.         else{
    46.            
    47.         for (var i = 0; i < document.getElementsByTagName("div").length; i++){
    48.             document.getElementsByTagName("div")[i].style.backgroundImage = "url('img/grau90.png')";
    49.         }
    50.         for (var i = 0; i < document.getElementsByClassName("navigation").length; i++){
    51.             document.getElementsByClassName("navigation")[i].style.backgroundImage = "url('img/grau90.png')";
    52.         }
    53.         for (var i = 0; i < document.getElementsByClassName("navLink").length; i++){
    54.             document.getElementsByClassName("navLink")[i].style.color = "#FFF";
    55.         }
    56.         for (var i = 0; i < document.getElementsByClassName("navLinkSub").length; i++){
    57.             document.getElementsByClassName("navLinkSub")[i].style.backgroundImage = "url('img/grau90.png')";
    58.             document.getElementsByClassName("navLinkSub")[i].style.color = "#FFF";
    59.         }
    60.         for (var i = 0; i < document.getElementsByClassName("divider").length; i++){
    61.             document.getElementsByClassName("divider")[i].style.backgroundImage = "none";
    62.         }
    63.         for (var i = 0; i < document.getElementsByClassName("blogHeading").length; i++){
    64.             document.getElementsByClassName("blogHeading")[i].style.backgroundImage = "none";
    65.         }
    66.         for (var i = 0; i < document.getElementsByTagName("p").length; i++){
    67.             document.getElementsByTagName("p")[i].style.color = "#FFF";
    68.         }
    69.         for (var i = 0; i < document.getElementsByTagName("span").length; i++){
    70.             document.getElementsByTagName("span")[i].style.color = "#CCC";
    71.         }
    72.        
    73.         for (var i = 0; i < document.getElementsByClassName("datumLarge").length; i++){
    74.             document.getElementsByClassName("datumLarge")[i].style.backgroundImage = "none";
    75.         }
    76.         for (var i = 0; i < document.getElementsByClassName("date").length; i++){
    77.             document.getElementsByClassName("date")[i].style.color = "#FFF";
    78.         }
    79.        
    80.         change = 0;
    81.         }
    82.     }
    83.     </script>
     
    #1      
  2. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Javascript Script vereinfachen/verallgemeinern
    AW: Javascript Script vereinfachen/verallgemeinern

    Möchtest du:
    a) das CSS global ändern, also bspw. "die Klasse .date hat jetzt folgende Eigenschaften", oder
    b) ein Farbschema anwenden, so ähnlich wie es jetzt funktioniert?

    Im Moment sehe ich das Hauptproblem darin, dass du fest definierte Klassen und Tags änderst. Wenn du per JS die komplette CSS-Datei auswechseln würdest, hättest du das der Erweiterbarkeit und Allgemeinheit sofort gelöst (das ist ja auch der Zweck von CSS).

    Aber vielleicht willst du ja bspw. dem Nutzer Kontrolle über die Feinheiten geben, dann bräuchtest du eine Funktion, die ein Element (bzw. eine Liste von Elementen), die gewünschte CSS-Eigenschaft und den neuen Wert annimmt - ähnlich dem, was jQuery mit .css() macht.


    Duddle
     
    #2      
  3. Coulyo

    Coulyo Director

    Dabei seit:
    04.06.2012
    Beiträge:
    70
    Geschlecht:
    männlich
    Ort:
    Flensburg
    Software:
    Photoshop, After Effects, Premiere, Blender
    Kameratyp:
    5D Mark III
    Javascript Script vereinfachen/verallgemeinern
    AW: Javascript Script vereinfachen/verallgemeinern

    Auf die einfachsten Sachen kommt man manchmal nicht...
    Ich möchte das CSS global ändern, der Nutzer soll keine Kontrolle über das Aussehen erhalten.
    Wie tauscht man denn die CSS Datei per Javascript aus? :)
     
    #3      
  4. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Javascript Script vereinfachen/verallgemeinern
    AW: Javascript Script vereinfachen/verallgemeinern

    Hier ist ein Ansatz mit Cookies (was sicher dein nächster Schritt wäre), hier ist die simpelste Variante.


    Duddle
     
    #4      
  5. Coulyo

    Coulyo Director

    Dabei seit:
    04.06.2012
    Beiträge:
    70
    Geschlecht:
    männlich
    Ort:
    Flensburg
    Software:
    Photoshop, After Effects, Premiere, Blender
    Kameratyp:
    5D Mark III
    Javascript Script vereinfachen/verallgemeinern
    AW: Javascript Script vereinfachen/verallgemeinern

    Danke, das mit den Cookies hab ich wirklich als nächstes geplant :)
    Aber der zweite Link funktioniert leider nicht.
     
    #5      
  6. layoutbraut

    layoutbraut Codegirl

    Dabei seit:
    02.06.2008
    Beiträge:
    92
    Geschlecht:
    weiblich
    Ort:
    zuhause
    Software:
    CS4, CS5, FreehandMX,
    Kameratyp:
    Casio Exilim
    Javascript Script vereinfachen/verallgemeinern
    AW: Javascript Script vereinfachen/verallgemeinern

    Ich nutze für größenspezifische CSS-Änderungen folgenden, einfachen Code:

    Code (Text):
    1. <script language="JavaScript" type="text/javascript">
    2.     if(screen.width >= 800){
    3.         //Weiterleiten auf Dokument
    4.         document.write('<link href="stylea.css" rel="stylesheet" type="text/css">');
    5.     } else { document.write('<link href="styleb.css" rel="stylesheet" type="text/css">');
    6.         }
    7. </script>
     
    #6      
  7. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.048
    Geschlecht:
    männlich
    Ort:
    Ö
    Javascript Script vereinfachen/verallgemeinern
    AW: Javascript Script vereinfachen/verallgemeinern

    Ich weiß, das hat nichts mit dem ursprünglichen Problem des TE zu tun, aber wieso verwendest du dafür Javascript und keine Mediaqueries? Diese sind nämlich genau dafür da.
     
    #7      
  8. Coulyo

    Coulyo Director

    Dabei seit:
    04.06.2012
    Beiträge:
    70
    Geschlecht:
    männlich
    Ort:
    Flensburg
    Software:
    Photoshop, After Effects, Premiere, Blender
    Kameratyp:
    5D Mark III
    Javascript Script vereinfachen/verallgemeinern
    AW: Javascript Script vereinfachen/verallgemeinern

    Ok, das funktioniert, wenn ich es ein wenig umschreibe :)

    Aber mal eine Frage, die etwas Offtopic ist:
    Ich möchte meine Seite auf Wordpress aufbauen und soweit ich weiß muss die CSS Datei da style.css heißen. Wenn ich jetzt auf eine andere wechsle, die xyz.css heißt, funktioniert das dann noch?
     
    #8      
  9. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Javascript Script vereinfachen/verallgemeinern
    AW: Javascript Script vereinfachen/verallgemeinern

    Ja, natürlich. Einer Website ist es egal, woher die Style-Informationen kommen. Die Festlegung auf "style.css" ist wohl nur, damit Wordpress einfach sagen kann "binde style.css im Ordner foobar ein". Wenn du danach zusätzliche / andere .css-Dateien einbindest, bzw. die aktuelle ersetzt, lädt der Browser diese dazu.


    Duddle
     
    #9      
  10. layoutbraut

    layoutbraut Codegirl

    Dabei seit:
    02.06.2008
    Beiträge:
    92
    Geschlecht:
    weiblich
    Ort:
    zuhause
    Software:
    CS4, CS5, FreehandMX,
    Kameratyp:
    Casio Exilim
    Javascript Script vereinfachen/verallgemeinern
    #10      
x
×
×