Heim > Artikel > Web-Frontend > Zwei Möglichkeiten zum Ein- und Ausblenden von Steuerelementen in js_javascript-Skills
Es gibt zwei Möglichkeiten, Steuerelemente mithilfe von JavaScript auszublenden, nämlich durch Festlegen der Attribute „Anzeige“ und „Sichtbarkeit“ des Steuerelementstils.
Das Steuerelement ist sichtbar, wenn style.display="block" oder style.visibility="visible" ist, und unsichtbar, wenn style.display="none" oder style.visibility="hidden". Der Unterschied besteht darin, dass „Anzeige“ nicht nur das Steuerelement ausblendet, sondern auch, dass das ausgeblendete Steuerelement nicht mehr die Position einnimmt, die es bei der Anzeige einnimmt, während das durch „Sichtbarkeit“ ausgeblendete Steuerelement das Steuerelement nur auf unsichtbar setzt und das Steuerelement weiterhin seine ursprüngliche Position einnimmt Position.
function displayHideUI() { var ui =document.getElementById("bbs"); ui.style.display="none"; } function displayShowUI() { var ui =document.getElementById("bbs"); ui.style.display="";//display为空的话会好使,为block会使后边的空间换行 } function visibilityHideUI() { var ui =document.getElementById("bbs"); ui.style.visibility="hidden"; } function visibilityShowUI() { var ui =document.getElementById("bbs"); ui.style.visibility="visible"; } </script>
Wertbeschreibung
none Dieses Element wird nicht angezeigt.
Block Dieses Element wird als Element auf Blockebene mit Zeilenumbrüchen vor und nach diesem Element angezeigt.
Inline-Standard. Dieses Element wird als Inline-Element ohne Zeilenumbrüche vor oder nach dem Element angezeigt.
inline-block Inline-Blockelement. (Neuer Wert in CSS2.1)
Listenelement Dieses Element wird als Liste angezeigt.
run-in Dieses Element wird je nach Kontext als Element auf Blockebene oder als Inline-Element angezeigt.
kompakt Es gibt einen Wert „compact“ in CSS, der jedoch aus CSS2.1 entfernt wurde, da keine breite Unterstützung vorhanden ist.
marker Es gibt einen Wertmarker in CSS, der jedoch aus CSS2.1 entfernt wurde, da keine breite Unterstützung vorhanden ist.
Tabelle Dieses Element wird als Tabelle auf Blockebene (ähnlich wie f5d188ed2c074f8b944552db028f98a1) mit Zeilenumbrüchen vor und nach der Tabelle angezeigt.
inline-table Dieses Element wird als Inline-Tabelle (ähnlich wie f5d188ed2c074f8b944552db028f98a1) ohne Zeilenumbrüche vor und nach der Tabelle angezeigt.
table-row-group Dieses Element wird als Gruppe aus einer oder mehreren Zeilen angezeigt (ähnlich wie 92cee25da80fac49f6fb6eec5fd2c22a).
table-header-group Dieses Element wird als Gruppe aus einer oder mehreren Zeilen angezeigt (ähnlich wie ae20bdd317918ca68efdc799512a9b39).
table-footer-group Dieses Element wird als Gruppe aus einer oder mehreren Zeilen angezeigt (ähnlich wie 06669983c3badb677f993a8c29d18845).
table-row Dieses Element wird als Tabellenzeile angezeigt (ähnlich wie a34de1251f0d9fe1e645927f19a896e8).
table-column-group Dieses Element wird als Gruppe aus einer oder mehreren Spalten angezeigt (ähnlich wie 879b49175114808d868f5fe5e24c4e0b).
Tabellenspalte Dieses Element wird als Zellenspalte angezeigt (ähnlich wie 581cdb59a307ca5d1e365becba940e05)
table-cell Dieses Element wird als Tabellenzelle angezeigt (ähnlich wie b6c5a531a458a2e790c1fd6421739d1c und b4d429308760b6c2d20d6300079ed38e)
table-caption Dieses Element wird als Tabellentitel angezeigt (ähnlich wie 63bd76834ec05ac1f4c0ebbeaafb0994)
inherit gibt an, dass der Wert des Anzeigeattributs vom übergeordneten Element geerbt werden soll.
Das heute gelöste Problem besteht darin, der durch CSS definierten Klasse label.error eine ID auf der JSP-Seite zu geben und dann die Sichtbarkeit der ID zu steuern, um die Js-Eingabeaufforderungsinformationen zu löschen, wenn das Div reduziert wird. Die Details sind wie folgt:
In der Funktion zur Vorbereitung der Schnittstelle var label1 = document.getElementById("label1");
$(document).ready(function() { $(".flipp .span4").click(function() { $(this).parent().next().toggle(); $(this).parent().parent().prevAll().find(".panel").hide(); $(this).parent().parent().nextAll().find(".panel").hide(); var label1 = document.getElementById("label1"); label1.style.display="none"; })
Dann fügen Sie die entsprechende Stelle in JSP ein:
<label class="error" id="label1" for="currentPWD" generated="true" style="display:inline"></label>
Für die von CSS definierte Klasse label.error können Sie $("label.error").removeAttr("style").attr("style", "display: none;"); verwenden Funktion. Darüber hinaus scheint es nicht erforderlich zu sein, den ID-Wert für das Etikett an der entsprechenden Stelle im Untergrund zu definieren.