Autor:Randy L. Taylor
Fonte:http://en.allexperts.com/q/Javascript-1520/JavaScript-visibility.htm
Como eu poderia fazer uma função Javascript mostrar um elemento em uma página (a marca, o mais provável) e outra função que esconde o elemento na página?
Existem basicamente duas maneiras diferentes de se esconder elementos - você pode definir a sua visibility para "hidden" , ou você pode definir o seu display para "none".
A opção visibility não altera a visibilidade de outros elementos em torno ou depois do elemento, enquanto que a opção display "colapsa" o elemento, por assim dizer.
<html>
<body>
<form>
<input type="button" value="Hide Table But Don't Affect Placement" onclick="hideTable()"><br>
<input type="button" value="Hide Table And Remove it From Placement" onclick="removeTable()"><br>
<input type="button" value="Show Table" onclick="showTable()"><br>
<table id="myTable" border="1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>
<br>
This is after the table, so you can see how the different ways of hiding the table work.
</form>
</body>
</html>
<script>
function setElementVisibility(elementToSet, showItSwitch, keepPlacementSwitch){
if (showItSwitch) {
elementToSet.style.display = "inline";
elementToSet.style.visibility = "visible";
}
else{
if (keepPlacementSwitch) {
elementToSet.style.display = "inline";
elementToSet.style.visibility = "hidden";
}
else{
elementToSet.style.display = "none";
}
}
}
function hideTable(){
setElementVisibility(document.getElementById("myTable"), false, true);
}
function removeTable(){
setElementVisibility(document.getElementById("myTable"), false, false);
}
function showTable(){
setElementVisibility(document.getElementById("myTable"), true);
}
</script>
<body>
<form>
<input type="button" value="Hide Table But Don't Affect Placement" onclick="hideTable()"><br>
<input type="button" value="Hide Table And Remove it From Placement" onclick="removeTable()"><br>
<input type="button" value="Show Table" onclick="showTable()"><br>
<table id="myTable" border="1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>
<br>
This is after the table, so you can see how the different ways of hiding the table work.
</form>
</body>
</html>
<script>
function setElementVisibility(elementToSet, showItSwitch, keepPlacementSwitch){
if (showItSwitch) {
elementToSet.style.display = "inline";
elementToSet.style.visibility = "visible";
}
else{
if (keepPlacementSwitch) {
elementToSet.style.display = "inline";
elementToSet.style.visibility = "hidden";
}
else{
elementToSet.style.display = "none";
}
}
}
function hideTable(){
setElementVisibility(document.getElementById("myTable"), false, true);
}
function removeTable(){
setElementVisibility(document.getElementById("myTable"), false, false);
}
function showTable(){
setElementVisibility(document.getElementById("myTable"), true);
}
</script>
0 comentários :
Enviar um comentário