gömma vanlig text

Hej.

Hur gör man för att gömma en helt vanlig text som man skrivit ut på skärmen?
<div>??????

Det går att göra på flera sätt för att få det crossbrowser osv. Det smartaste är att söka blan tusentals inlägg. ;)

<div id="hide">Text som kommer att gömma sig.</div>
<a href="#" onClick="document.all['hide'].style.display='none';">Göm mig!</a>

Jesper T skrev:

Det går att göra på flera sätt för att få det crossbrowser osv. Det smartaste är att söka blan tusentals inlägg. ;)

<div id="hide">Text som kommer att gömma sig.</div>
<a href="#" onClick="document.all['hide'].style.display='none';">Göm mig!</a>

Vill man få det crossbrowser gör man klokt i att använda document.getElementById() istället för document.all ;)

men om jag vill ha flera <div> då?, då kan jag väl inte döpa den till hide väl?. och hur gör jag den visible?

och kan jag inte använda
document.Form.test.style.visibility="visible"; ?????
iställlet?

Skriv HTML-kod för det du vill dölja så blir det lättare att förstå vad du menar.

jag vill skriva ut

HEJ

och

HALLO

men när sidan laddas vill jag att dessa ska vara dolda.

När jag sen trycker på en knapp ska dessa 2 visas.

<div style="display: none" id="hej">Hej</div>
<div style="display: none" id="hallo">Hallo</div>

<button onclick="document.getElementById('hej').style.display='block'; document.getElementById('hallo').style.display='block';">Klick</button>

hmm verkar som det blir ett return tryck efter varje objekt som ska visas. hur fixar man detta? varför använder ni elementbyid?
och varför kan man inte använda style.visibility="visible" istället eller nåt?, vad är det för skillnad?.

Menar du så här?

<span style="display: none" id="hej">Hej</span>
<span style="display: none" id="hallo">Hallo</span>

<button onclick="document.getElementById('hej').style.display='inline'; document.getElementById('hallo').style.display='inline';">Klick</button>

EDIT:
Du löste visst det själv

nej upptäckte senare att jag inte löste det :)

hmm när jag gör såhär så får jag ett felmeddelande.

document.MittForm.divtest.style.display='inline';
<div style="display: none" id="divtest">Test:</div>

men gör jag samma sak med en Input ruta
document.MittForm.testning.style.display='inline';
<input name="testning" style="display: none";>

så funkar det.

display verkar inte vara generell för alla objekt, finns det någon generell grej för att visa och gömma objekt?

Skillnaden mellan visibility: hidden och display: none är att 'visibility: hidden' fortfarande gör att elementet tar upp plats, men inte syns. Skriver du 'display: none' kommer elementet varken ta plats eller synas.

Om du använder 'display' finns det tre viktiga värden: none (elementet syns inte), block (elementet visas som ett blocklevel-element) och inline (elementet visas som ett inline-element).
Läs Erik Juhlins förklaring ang. inline- resp. blocklevel-element för att förstå skillnaden:
http://www.juhlin.nu/wf/blockvsinline.html

<div> är ett blocklevel-element och visas därför på rätt sätt genom att ange display: block när du ska få fram det. Det går bra att skriva display: inline istället, men då kommer det att visas som ett inline-element, vilket förmodligen inte var det du var ute efter.

Ett alternativ är att strunta i att ange block eller inline (det finns betydligt fler möjliga värden, men det är dessa två som är vanligast) och istället bara skriva

document.getElementById('foo').style.display=''

Jag ser det dock som en fullösning.

När du ska identifiera ett formulärselement går det bra att skriva

document.formulärsNamn.elementNamn

men det går inte om det inte är ett formulärselement. Då bör du istället använda dig av getElementById():

document.getElementById('elementId')

I IE kan man använda document.all['elementId'], men det kommer man inte långt med i Mozilla.

gott att se :)
nu funkar allt som det ska, tack.

en sak bara. varför kan jag inte ändra värdet i DIV:en?

document.getElementById('diven').value="hej";

detta funkar inte, händer ingenting.

Byta text i en DIV.

Ändra till det här.

document.getElementById('diven').innerHTML="hej";

ex.

<html>
<head>
<title></title>
<script language="javascript">
function bytText(strTmp){
	document.getElementById('diven').innerHTML = strTmp;
}
</script>
</head>
<body>
<div id="diven">Text</div>
<br>
<br>
<a href="#" onClick="bytText('Ny text');" return false;>Byt text</a>
</body>
</html>

tack. jag provade att använda span också, funkar bra, hmm , om jag vill ändra storleken på span i HTML, hur gör jag då tro?