Ankündigung

Einklappen
Keine Ankündigung bisher.

Mit JavaScript CSS-Änderungen vornehmen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Mit JavaScript CSS-Änderungen vornehmen

    Hey,

    Ich habe in CSS eine BOX definiert

    Code:
    #BOX{
    ...
    width:20px;
    height:20px;
    ...
    
    }
    nun möchte ich mit Hilfe von JS auf die Werte width und height zugreifen und ändern.

    Mein Ansatz sieht wie folgt aus
    Code:
    document.getElementById("box").blabla
    nur weiss ich nicht, ob das geht, und wenn, wie es geht.

    Vielleicht habt ihr ja eine Idee oder eine Internetseite wo ich das mal nachlesen könnte.


  • #2
    Hallo,

    mit JQuery geht das recht reinfach.

    .css() – jQuery API

    Kommentar


    • #3
      Ändern: SELFHTML: JavaScript / Objektreferenz / style
      Lesender Zugriff geht nur bei Werten, die vorher auch darüber oder per style-Attribut gesetzt wurden - für andere Fälle getComputedStyle (googlen).

      Kommentar


      • #4
        Zitat von aeris Beitrag anzeigen
        Hallo,

        mit JQuery geht das recht reinfach.

        .css() – jQuery API
        Mhm, wenn ich den Text richtig verstanden habe (mein Englisch ist recht mies ), dann sollte es doch eigentlich so gehen oder?

        Code:
        $("box").css("height") = 200 px;
        oder so

        Code:
        $("#box").height("20px");
        Allerdings tut sich da nichts.

        Kommentar


        • #5
          Code:
          $('#BOX').css("width", "200px");
          JQuery einbinden nicht vergessen

          Kommentar


          • #6
            Zitat von ScriptChaos Beitrag anzeigen
            Code:
            $("box").css("height") = 200 px;
            Allerdings tut sich da nichts.
            Doch, da tut sich ganz sicher was - in der Fehlerkonsole.
            Lerne, diese zu nutzen!


            Der Wert, den du zuweist, ist ungültig - und danach kommt noch ein px, was an der Stelle einen Syntaxfehler auslöst.

            Kommentar


            • #7
              Ja meine Fehlerkonsole sagt:

              $ is not defined

              Kommentar


              • #8
                Um JQuery nutzen zu können musst du es auch einbinden.

                Schau dir diesen Link mal an:
                http://www.very-clever.com/jquery-tutorial.php

                Solltest du JQuery nicht nutzen und es mit "reinem" JS lösen wollen hilft dir der Link auf SelfHTML von ChrisB weiter.

                Kommentar


                • #9
                  Zitat von aeris Beitrag anzeigen
                  Um JQuery nutzen zu können musst du es auch einbinden.

                  Schau dir diesen Link mal an:
                  jQuery Tutorial - Die Grundlagen

                  Solltest du JQuery nicht nutzen wollen und es mit "reinem" JS lösen wollen hilft dir der Link auf SelfHTML von ChrisB weiter.
                  Ahhh danke, jtz bin ich schonmal weiter. Ich habe jquery nun eingebunden. Die Fehlerkonsole ist nun auch leer, allerdings tut sich immernoch nichts. Mein Code sieht momentan so aus:

                  Code:
                  <script type="text/javascript" src="jquery.js">
                  $('#Box').css("height","200px");
                  </script>
                  und das ist die Box

                  Code:
                  #Box {
                  	position:relative;
                  	left:65px;
                  	top:227px;
                  	width:500px;
                  	height:20px;
                  	z-index:1;
                  	border:1;
                  	border-color:#FFF;
                  	padding:10px;
                  	display:marker;
                  	border: 3px solid #ffffff;
                  }

                  Kommentar


                  • #10
                    Code:
                    <script type="text/javascript" src="jquery.js"></script>
                    <script type="text/javascript">
                    $(document).ready(function(){
                       $('#Box').css("height","200px");
                     });
                    </script>

                    Kommentar


                    • #11
                      Abgesehen von aeris' Hinweis - du musst ggf. erst abwarten, bis die Elemente existieren - ist auch das falsch:
                      Code:
                      <script type="text/javascript" src="jquery.js">
                      $('#Box').css("height","200px");
                      </script>
                      Es wird entweder der JS-Code, der im src-Attribut angegeben ist, ausgeführt, oder der als Elementinhalt angegebene - beides zusammen unterstützen aktuelle Browser nicht.

                      Also in zwei Script-Elemente aufteilen.

                      Kommentar


                      • #12
                        Vielen Vielen Dank,

                        es hat 1A geklappt, wieder etwas gelernt

                        Kommentar


                        • #13
                          @ChrisB
                          hatte ich innerhalb von 1-2 Minuten berichtigt (Flüchtigkeitsfehler), unsere Beiträge haben sich wohl überschnitten.

                          Kommentar


                          • #14
                            Du kannst auch direkt Zahlen an die Funktion übergeben. Allerdings muss man darauf achten, dass der Rückgabewert immer inkl. Einheit ist, man muss also noch parseInt darauf anwenden, wenn man damit rechnen will.

                            Kommentar

                            Lädt...
                            X