Frage Auslesen von Stylepropeties

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Christian_01

Mitglied
9 Februar 2017
42
0
6
24
Hallo,

das auslesen von Stylepropeties sieht einfach aus, aber ich mach etwas falsch. Doch leider weiß ich nicht was ich falsch mache...
alert(document.getElementById("myDiv").style.left); (Quelle: W3school & Windows.alert habe ich auch schon probiert)

Wenn ich das mache und nur die ID ändere zu "Menü" bekomme ich ein leeres Alert.

Woran liegt das?

Gruß Christian

HTML:
<div id="Menü">
            <div class="btn-group-vertical" role="group" aria-label="...">
                <button class="btn btn-default" type="button">Startseite</button>
                <button class="btn btn-default" type="button">Angebot</button>
                <button class="btn btn-default" type="button">Speisekarte</button>
                <button class="btn btn-default" type="button">Öffnunszeiten</button>
                <button class="btn btn-default" type="button">Termine</button>
                <button class="btn btn-default" type="button">Aktionen</button>
                <button class="btn btn-default" type="button">Impressum</button>
            </div>
            
        </div>

Code:
#Menü{
        position: absolute;
        left: -50%;
        z-index: 2;
        height: 100vh;
        width: 50%;
        border: 2px solid grey;
        border-radius: 0.4em;
    }

JavaScript-Code: alert(document.getElementById("Menü").style.left);
 

scbawik

Senior HTML'ler
14 Juli 2011
2.552
448
83
Hallo,

das auslesen von Stylepropeties sieht einfach aus, aber ich mach etwas falsch. Doch leider weiß ich nicht was ich falsch mache...
alert(document.getElementById("myDiv").style.left); (Quelle: W3school & Windows.alert habe ich auch schon probiert)

Wenn ich das mache und nur die ID ändere zu "Menü" bekomme ich ein leeres Alert.

Woran liegt das?

Gruß Christian

HTML:
<div id="Menü">
            <div class="btn-group-vertical" role="group" aria-label="...">
                <button class="btn btn-default" type="button">Startseite</button>
                <button class="btn btn-default" type="button">Angebot</button>
                <button class="btn btn-default" type="button">Speisekarte</button>
                <button class="btn btn-default" type="button">Öffnunszeiten</button>
                <button class="btn btn-default" type="button">Termine</button>
                <button class="btn btn-default" type="button">Aktionen</button>
                <button class="btn btn-default" type="button">Impressum</button>
            </div>
           
        </div>

Code:
#Menü{
        position: absolute;
        left: -50%;
        z-index: 2;
        height: 100vh;
        width: 50%;
        border: 2px solid grey;
        border-radius: 0.4em;
    }

JavaScript-Code: alert(document.getElementById("Menü").style.left);

https://developer.mozilla.org/de/docs/Web/API/Window/getComputedStyle

Oder einfacher gleich http://api.jquery.com/css/ verwenden.
 

Christian_01

Mitglied
9 Februar 2017
42
0
6
24
okay danke schonmal dafür...das klappt.
Um den Wert zu vergleichen mit einer Zahl (z.B. 10) muss ich den erst umwandeln mit parseInt oder kann ich dies auch einfacher machen, da mir ja ein String zu zurück gegeben wird.