myDiv.style.display gibt leer zurück, wenn es im Master-Stylesheet festgelegt ist

Lesezeit: 4 Minuten

Benutzer-Avatar
John Fitzpatrick

Kurzfassung: Ist das Standardverhalten myDiv.style.display (Javascript) gibt leer zurück, wenn ich das eingestellt habe div zu display:none in einem Master-Stylesheet, gibt aber “none” zurück, wenn es über einen Inline-Stil festgelegt wird?

Lange Version:

Ich habe welche divs, dass ich über ihre ein- und ausblende display Stil, umschalten mit Javascript zwischen block und none. Sie fangen immer versteckt an (display:none), die ich so mit Inline-Stilen eingestellt habe:

<div id="anID" class="aClass" style="display:none">
   stuff
</div>

Hier ist das Javascript zum Umschalten none und block. Die beiden chOpsXXX()-Funktionen setzen einfach die divSection.style.display zum Gegenwert (zusammen mit sonstiger Haushaltsführung):

var divSection = document.getElementById("chOpsSection" + strSectionID);
var strDisplay = divSection.style.display;
if (strDisplay == "none") {
    chOpsDisplaySection(strSectionID);
} else {
    chOpsHideSection(strSectionID);
}

Das alles funktioniert gut, wenn ich ein Inline-Stilattribut verwende, um die Initiale festzulegen display:none Stil.

Ich lege auch andere Stile für diese Divs im Master-Stylesheet fest. Also entschied ich, dass es sinnvoll sein könnte, den Anfangszustand zu verschieben display:none zu besagtem Stylesheet. Ich habe es so gemacht. Ich werde es nicht posten, ich denke, Sie können es sich vorstellen.

Aber als ich das tat, die div ist zunächst ausgeblendet (display:none), aber der erste Aufruf an divSection.style.display gibt einen leeren String zurück (alert(strDisplay); gibt eine leere Zeichenfolge zurück, nicht null).

Mein oben gezeigtes Javascript blendet es dann aus (weil es nicht gleich “none” ist) und dann die nächste Aufruf divSection.style.display gibt “none” zurück und alles funktioniert von dort aus. (Gleiches Verhalten, wenn ich es auf setze inline im Master-Stylesheet: die div ist initialy sichtbar, und der erste Aufruf an divSection.style.display gibt eine leere Zeichenfolge zurück).

Dies lässt sich leicht beheben, indem Sie in meinem Javascript oben nach “none” und “” suchen. Aber ich würde gerne wissen, ob diese Rückgabe von einem leeren String stammt divSection.style.display ist Standardverhalten.

Alle Antworten sind willkommen.

  • Ist der Stil im CSS definiert? Oder in das HTML-Tag?

    – Niccolò Campolungo

    25. Mai 2013 um 11:00 Uhr

  • In Szenario eins, das wie erwartet funktioniert, display:none wird im HTML-Tag gesetzt. In Szenario zwei, das ich nicht verstehe, display:none wird in der CSS-Datei gesetzt. Ich hoffe, ich habe oben die richtige Terminologie verwendet.

    – John Fitzpatrick

    25. Mai 2013 um 11:02 Uhr

  • @John F, können Sie bitte Ihre Frage aktualisieren und sagen, ob Sie an Lösungen interessiert sind, die Frameworks beinhalten oder nicht? Ich habe das Gefühl, dass Downvotes hier gerechtfertigt werden müssen. Vielen Dank

    – alexb

    25. Mai 2013 um 11:52 Uhr

  • @Alexb Entschuldigung für die Ablehnungen. Alle Antworten sind mir willkommen. Ich werde das erwähnen.

    – John Fitzpatrick

    25. Mai 2013 um 11:55 Uhr

  • @Alexb: Um ehrlich zu sein, der nützlichste Teil Ihrer Antwort waren die Links mit den Erklärungen dessen, was vor sich ging. Das Jquery-Snippet war das i-Tüpfelchen.

    – John Fitzpatrick

    25. Mai 2013 um 11:58 Uhr

Benutzer-Avatar
Niccolò Campolungo

Wenn Sie über JS auf ein DOM-Element zugreifen (z getElementById) können Sie die nicht lesen berechneter Stil dieses Elements, da es in der CSS-Datei definiert ist. Um dies zu vermeiden, müssen Sie Eigentum verwenden getComputedStyle(oder currentStyle für IE).

function getStyle(id, name)
{
    var element = document.getElementById(id);
    return element.currentStyle ? element.currentStyle[name] : window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(name) : null;
}

Verwendungszweck(JSFiddle):

var display = getStyle('myDiv', 'display');
alert(display); //will print 'none' or 'block' or 'inline' etc

  • Hey @LightStyle – meintest du element.currentStyle[name] eher, als x.currentStyle[styleProp]?

    – Steven Moseley

    25. Mai 2013 um 11:21 Uhr

  • +1 Auch von mir. Danke für diese Antwort. Du hast mir etwas Neues beigebracht.

    – Steven Moseley

    25. Mai 2013 um 11:45 Uhr

  • cool und nützlich 😉 es hat mir geholfen, das zu erfinden github.com/jintor/stubquery.js/blob/main/stubquery.js

    – Jintor

    22. August 2021 um 2:45 Uhr

Benutzer-Avatar
Steven Moseley

Es funktioniert nicht, weil Sie es als entfernt haben style -Attribut für Ihr Element und platzierte es in einem externen Stylesheet. DOM zeigt keine Attributwerte an, die nicht im Dokumentobjekt vorhanden sind (DOM ist lediglich ein XML-Parser, der Ihr HTML-Dokument wörtlich liest).

Um CSS-Werte zu finden, die in einem externen Stylesheet festgelegt sind, müssen Sie parsen document.styleSheets und finden Sie den/die passenden Selektor(en).

Hier verwenden Sie eine Bibliothek wie jQuery wird wirklich praktisch, weil es externe Stylesheets parst und Hilfsmethoden hat, um das vollständige CSS auf ein Element anzuwenden.

Beispiel dafür, wie Sie dies in jQuery tun würden:

value = $("#anID").css("display");

PS – Die Suche nach einem leeren String funktioniert auch nicht, weil display: “” nicht dasselbe ist wie display: “none” (und tatsächlich dasselbe ist wie display: block, für ein div, weil a leer bedeutet im Wesentlichen inherit)

Meine Lösung:

Klasse erstellen .hidden

.hidden {
   display: none !important;
}

Javascript:

function toggleHidden(id) {
    var x = document.getElementById(id);
    x.classList.toggle('hidden');
}

Die Javascript-Anzeigeeigenschaft steht nur für das DOM-Attribut

Mozilla JS-Wiki, Gibt ein Objekt zurück, das die darstellt style-Attribut des Elements.

W3schools, Das Style-Objekt repräsentiert eine individuelle Stilaussage

Sie könnten jquerys verwenden css Methode, um einen gemischten Anzeigewert zu erhalten, wie z

alert($("#foo").css("display"))

Es sollte sich zeigen keiner Auch wenn Sie es mit CSS einstellen

1009840cookie-checkmyDiv.style.display gibt leer zurück, wenn es im Master-Stylesheet festgelegt ist

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy