Maison >interface Web >js tutoriel >Deux façons de masquer et d'afficher les contrôles dans les compétences js_javascript
Il existe deux manières de masquer les contrôles à l'aide de JavaScript, à savoir en définissant les attributs « affichage » et « visibilité » du style du contrôle.
Le contrôle est visible lorsque style.display="block" ou style.visibility="visible", et est invisible lorsque style.display="none" ou style.visibility="hidden". La différence est que "affichage" non seulement masque le contrôle, mais aussi le contrôle masqué n'occupe plus la position occupée lors de l'affichage, tandis que le contrôle masqué par "visibilité" rend uniquement le contrôle invisible, et le contrôle occupe toujours sa position d'origine. 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>
Description de la valeur
none Cet élément ne sera pas affiché.
block Cet élément sera affiché comme un élément de niveau bloc avec des sauts de ligne avant et après cet élément.
par défaut en ligne. Cet élément sera affiché comme un élément en ligne sans saut de ligne avant ou après l'élément.
inline-block Élément de bloc en ligne. (Nouvelle valeur en CSS2.1)
list-item Cet élément sera affiché sous forme de liste.
run-in Cet élément apparaîtra comme un élément de niveau bloc ou un élément en ligne, selon le contexte.
compact Il existe une valeur compact en CSS, mais elle a été supprimée de CSS2.1 en raison du manque de support généralisé.
marqueur Il existe un marqueur de valeur dans CSS, mais il a été supprimé de CSS2.1 en raison d'un manque de support généralisé.
table Cet élément sera affiché sous forme de tableau au niveau bloc (similaire à f5d188ed2c074f8b944552db028f98a1) avec des sauts de ligne avant et après le tableau.
inline-table Cet élément sera affiché sous forme de tableau en ligne (similaire à f5d188ed2c074f8b944552db028f98a1) sans sauts de ligne avant et après le tableau.
table-row-group Cet élément sera affiché sous la forme d'un groupe d'une ou plusieurs lignes (similaire à 92cee25da80fac49f6fb6eec5fd2c22a).
table-header-group Cet élément sera affiché sous la forme d'un groupe d'une ou plusieurs lignes (similaire à ae20bdd317918ca68efdc799512a9b39).
table-footer-group Cet élément sera affiché sous la forme d'un groupe d'une ou plusieurs lignes (similaire à 06669983c3badb677f993a8c29d18845).
table-row Cet élément sera affiché sous forme de ligne de tableau (similaire à a34de1251f0d9fe1e645927f19a896e8).
table-column-group Cet élément sera affiché sous la forme d'un groupe d'une ou plusieurs colonnes (similaire à 879b49175114808d868f5fe5e24c4e0b).
table-column Cet élément sera affiché sous forme de colonne de cellules (similaire à 581cdb59a307ca5d1e365becba940e05)
table-cell Cet élément sera affiché sous forme de cellule de tableau (similaire à b6c5a531a458a2e790c1fd6421739d1c et b4d429308760b6c2d20d6300079ed38e)
table-caption Cet élément sera affiché sous forme de titre de tableau (similaire à 63bd76834ec05ac1f4c0ebbeaafb0994)
hériter spécifie que la valeur de l'attribut display doit être héritée de l'élément parent.
Le problème résolu aujourd'hui est de donner à la classe label.error définie par css un identifiant dans la page jsp, puis de contrôler la visibilité de l'identifiant pour effacer les informations d'invite js lorsque le div est réduit. Les détails sont les suivants :
Dans la fonction de préparation de l'interface 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"; })
Puis ajoutez l'endroit correspondant dans jsp :
<label class="error" id="label1" for="currentPWD" generated="true" style="display:inline"></label>
Pour la classe label.error définie par CSS, vous pouvez utiliser $("label.error").removeAttr("style").attr("style", "display: none;"); fonction. De plus, il semble qu’il ne soit pas nécessaire de définir la valeur id du label à l’emplacement souterrain correspondant.