Dölja text utan att påverka stilmall

Okay, då ska vi se ifall jag lyckas förklara det här så att ni förstår. :D

Jag håller på med en liten fotoblog. Och på den sidan har jag två stilmallar, en med svart bakgrund, och en med vit. Jag använder styleswitcher från alistapart för att bläddra mellan de båda.

Men jag vill även kunna ha valmöjligheten att dölja all text. Men gör jag en stilmall för det så blir det fel, eftersom styleswitcher då inte vet vilken bakgrundsfärg man hade valt (svart eller vit).

Finns det något sätt som man kan dölja text på, utan att byta stilmall? Jag vill själv kunna välja vilka objekt som ska döljas.

Så här hade jag tänkt att det skulle se ut:

» black / white
» hide / show text

Förstår ni? :)

Använd en cookie för att spara vilken bakgrundsfärg det är som gäller.

Peter S skrev:

Använd en cookie för att spara vilken bakgrundsfärg det är som gäller.

Den här styleswitcher använder cookies. Men det är inte bara bakgrundsfärgen som ändras, det är länkar och texter också. Färgerna inverteras helt enkelt.

Om du har all din text inom en sorts taggar så kan du ju använda getElementsByTagName() för att få alla elementen av den sorten. Sedan kan enkelt gömma dem. Exempel:

var b = document.getElementsByTagName("p");
for(i=0;i<b.length;i++)
	b[i].style.display = "none";

Tack. :) Förlåt, men jag kan verkligen inge javascript. Hur aktiverar man din funktion? All text ligger ju inom en p-tagg så det borde väl funka. Men det gör ju iofs bilderna också, och dem vill jag ju inte dölja. :o

function hideText() {
var b = document.getElementsByTagName("p");
for(i=0;i<b.length;i++)
	b[i].style.display = "none";
}

och html:

<a href="javascript: hideText()">hide text</a>

Tack. Det där fungerar ju ganska bra. Men. Mina bilder döljs ju också eftersom de ligger <p><img></p>... Går det att haxxa? Och hur får man tillbaka texten? :D

Jag har ingen aning om hur man kan få bilderna att visa sig, men om du vill visa texten igen så kan du göra såhär:

function showText()
{
	var b = document.getElementsByTagName("p");
	for(i=0;i<b.length;i++)
		b[i].style.display = (b[i].style.display == "none")?"":"none";
}

Om detta hör ihop med det jag svarade på i htmlforumet förut (vilket det ser ut att göra) borde du kunna göra något sådant här:

.notext div p + p {
	display: none;
}

function hideText()
{
	//Om du har någon form av wrapper kring alla dina bilder skulle du kunna lägga till klassen "notext" på den, typ
	//document.getElementById("id:tpådinwrapper").className = "notext";
	//eller på body-taggen:
	document.body.className = "notext";

	//Förutsatt att du inte redan har något klassnamn satt på body-taggen eller lämpligt objekt... Har du det får detta justeras lite.
}

Fasen, det blir så krångligt eftersom jag har flera objekt som ska döljas. Och det verkar inte vara så lätt att lösa. Det är ju egentligen alla dessa som ska bort:
#header
p.meta
div.display p + p

Går det inte att smacka ihop alla på samma gång då:

.notext #header,
.notext p.meta,
.notext div.display p + p {
	display: none;
}

och sätta klassen "notext" (eller vad den nu ska heta) på något som omsluter alltihop (t ex body-taggen)?

Ska pröva. :D Är din kod fullständig som du skrev där uppe? *prövar*
En grej till, sätter jag display: none, så visas ju ingenting som standard. :)

Jag har ärligt talat inte testat koden, men den bör fungera tycker jag.

Men display: none gäller bara om de ligger inuti någonting med klassen "notext", och tanken var att du inte har den klassen satt på någonting från början, utan lägger till den på body-taggen (eller annat lämpligt ställe) med javascriptfunktionen (när du klickar på en länk eller så). Så display: none ska inte gälla förrän du faktiskt vill dölja din text.