JavaScript benutzerdefinierte Funktion, die unerwarteten Wert zurückgibt

Question

Ich habe eine Reihe von style.display, firstChild.data und innerHTML Werte, die zwischen zwei Optionen wechseln und eine Hilfsfunktion für diesen Zweck gemacht. Es ist:

function htmlToggle(elem, prop, newVal, oldVal){ 
    elem[prop] == oldVal ? elem[prop] = newVal : elem[prop] = oldVal; 
} 

Das hat mit meinen ganzen Elementen (etwa 10) mit Ausnahme des neuesten gearbeitet. Wenn ich versuche, die Anzeige zu wechseln, passiert nichts, obwohl ich unmittelbar danach die Anzeige eines anderen Divs umschalte, und das funktioniert erfolgreich (diese Position außerhalb der Position zu glätten, weil sie nicht ausgeschaltet werden kann.)

console.log, und stellte fest, dass für dieses Element allein, elem[prop] = "", wenn es die Funktion erreicht. Alle anderen Elemente haben, was ich erwarten (sollte elem[prop] == oldVal ==> true, um zu starten). Irgendwelche Ideen

, warum dies ist? Hier ist die Auszeichnungs für das nicht arbeitende Element:

<div id="text-div" style='display:none'></div> 

In einem Rückruf, der die Hin- und Herschalten immer vorangestellt wird, wird seine Art mit dem folgenden zurück:

document.getElementById('text-div').style = 'display:block-inline'; 

Also nach diesem Aufruf ist sein Stil 'display:block-inline', das, was dann als oldVal Argument werde ich in htmlToggle. Hier ist der Aufruf htmlToggle:

htmlToggle(document.getElementById('text-div').style, 'display', 'none', 'block-inline'); 

Beachten Sie, dass dieses Element Inline ist, in einem Abschnitt, mit einem anderen div, die bis zu 100% der Linie erweitern sie teilen nach #text-div-display:none geht.

Die CSS für die section, text-div und die andere div in seiner Linie (map), ist hier:

section { 
    width: 98%; 
    height: 750px; 
    background: RGB(240,240,240); 
    margin: auto; 
    padding: 10px; 
} 

div#map { 
    width: 100%; 
    height: 750px; 
    float: left; 
    position: relative; 
} 

div#text-div { 
    margin-left: 76%; 
    width: 23%; 
    height: 750px; 
    background: RGB(240,240,240); 
    overflow: scroll; 
} 

Ich habe in dem ganzen Ort, um diese Funktion und dieses Musters wurde unter Verwendung, ohne Probleme. Das stampft mich. Ich könnte immer einfach meine Hilfsfunktion nicht benutzen, richte irgendeinen Booleschen Wert ein, um mir zu sagen, welcher Wert manuell umgeschaltet werden soll, und tue es so. Aber ich möchte wirklich verstehen, warum das nicht funktioniert, auch wenn ich am Ende einen Workaround benutze.

function htmlToggle(elem, prop, newVal, oldVal) { 
 
    
 
    elem[prop] == oldVal ? elem[prop] = newVal : elem[prop] = oldVal; 
 
} 
 

 
function toggle_test() { 
 
    htmlToggle(document.getElementById('text-div').style, 'display', 'none', 'inline-block'); 
 
}

<div id="text-div" style='display:none'>BLAHBLAH</div> 
 
<button onclick="toggle_test();">TEST</button>

Answer 1

es einfach block-inline-inline-block wie so ändern. Dies überschreibt vermutlich alle anderen Stile des Elements. Sie sollten dies stattdessen tun:

document.getElementById('text-div').style.display = 'inline-block'; 

Answer 2

document.getElementById('text-div').style = 'display:block-inline'; ist nicht der richtige Weg, um den Stil über Javascript zu setzen: