Om display-attributten versus visibility attributten

De to grundlæggende værdier, du kan give display-attributten, er block og none: display:none;
display:block;

Den første værdi fjerner fuldstændig det element, der har denne display-værdi, og tillader andre elementer, som f.eks. tekst-elementer, at fylde den plads, det fjernede element har optaget.

Den komplementære værdi er block, der viser elementet med de egenslaber, det i øvrigt har.

Selve menuen til højre viser en anvendelsesmulighed, hvor display anvendes til at fjerne en menu, helt eller delvis, således at der bliver mere plads til artiklens tekst.

I eksemplerne - kasserne under menuen - sker forsvindingsnummeret i begge tilfælde ved at gøre overskriften til et link, der kalder en funktion:

<h3><a href="javascript:skjul('hide')">
Display vs. Visibility</a></h3>

Parameteren hide refererer til en ID, jeg har givet tekstafsnittet inde i den første kasse. Funktionen skjul() ser således ud:

var eks1=1;
function skjul(objekt){
	if (eks1==1){
		skjulObjekt(objekt);
		eks1=0;
		return;
	}
	if (eks1==0){
		visObjekt(objekt);
		eks1=1;
	}
}

Funktionen er en smule mere kompliceret end strengt nødvendigt, fordi jeg gerne vil have, at kassens indhold skal vises igen ved et fornyet klik. Da det er meget nyttigt at kunne, henviser jeg til websiden Simpel dropdown-menu, hvor principperne for en sådan klik/klik-igen funktion er forklaret i detaljer.

Funktionen skjul(objekt) indeholder funktionskaldet skjulObjekt(objekt). Denne funktion er defineret i mit DHTML modulbibliotek, ligesom dens modstykke, visObjekt(objekt). I begge tilfælde er objekt det samme som den parameter, jeg passerede til funktionen, nemlig ID'en hide.

Brug af display-attributten

Til det andet eksempel kan jeg ikke genbruge min skjul-funktion, men må lave en anden:

var eks2=1;
function hide(objekt){
	if (eks2==1){
		collapseObjekt(objekt);
		eks2=0;
		return;
	}
	if (eks2==0){
		expandObjekt(objekt);
		eks2=1;
	}
}

Ved første øjekast ser denne funktion jo ud til at være mage til den første, og funktionaliteten er da også nøjagtigt mage til. Men i stedet for at bruge modulbibliotekets visObjekt og skjulObjekt-funktioner, bruger jeg funktionerne collapseObjekt og expandObjekt, der også er defineret i modulbiblioteket, nemlig ved følgende:

// 21a.	Bring objektet tilsyne (blok)
function expandObjekt(objekt){
var blok = findObjekt(objekt);
blok.display="block"
}
// 21b. Bring objektet tilsyne (inline)
function expandInline(objekt){
var blok = findObjekt(objekt);
blok.display="inline"
}
// 22a. Fjern objektet 
function collapseObjekt(objekt){
var blok = findObjekt(objekt);
blok.display="none"

Display:inline

Nr. 21b er én, du sikkert ikke ofte får brug for, men nu kan være meget rar at have, hvis du f.eks. vil lave en pendant til et elements title. Et eksempel på brug af title ser du i forkortelsen SAS. Ønsker du at gøre det ved hjælp af display-attributten, kommer SAS "Special Air Service" - et engelsk eliteregiment - eksemplet til at se ud som vist i disse linier.

Oprettet: 10. februar 2003
Senest opdateret: 21. maj 2003