Gå til innhold

Å endre HTML med js


Anbefalte innlegg

Jeg har et veldig trivielt problem. Eller en utfordring om du vil.

 

 

La oss si at dette er HTML-koden (noe forenklet:)

 

<html><body>

<p style="color: #ff0000;">Hei på deg</p>

</body>

</html>

 

 

Så, inni denne suppa skal jeg ha et script som endrer farger på skriften.

Helst skal siden lastes uten at man rekker å se at skrifta er rød, men noen øyeblikk venting mens siden laster er akseptabelt.

 

Jeg har -null- erfaring med js bortsett fra "onload="this.style.color"-greier.

 

Det jeg er for meg er:

<script>

-definere streng som skal skiftes (ff0000)

-definere hva vi skal endre den til (f.eks 00ff00)

-lese hele siden

-lese og erstatte ff0000 med 00ff00

-skrive hele siden på nytt, og erstatte kilden

</script>

 

Dette er sikkert enda enklere, men who knows.

 

Et svar hadde gjort meg glad.

 

-Yngve

Lenke til kommentar
Videoannonse
Annonse

Får hodepine bare jeg tenker på løsningen du foreslår. :ph34r:

 

<html>
<head>
</head>
<body onload="document.getElementById('skift_min_farge').style.color=' #00ff00'">
<p id="skift_min_farge" style="color: #ff0000;">Hei på deg</p>
</body>
</html>

 

Denne løsningen passer best når det er kun 1 ting som skal forandres.

 

Jeg er ikke sikker på hvordan dette passer inn med 'skal ikke ses når den er rød', men den delen skjønte jeg ikke helt heller. Kanskje det har noe med klokkeslettet å gjøre...

Endret av Kagee
Lenke til kommentar

Takk for svar, Kagee.

Dessverre er det ikke slik at jeg er privigert nok til å ha ID på taggene.

Det er rett og slett ikke min kode som skal forandres, jeg skal bare submitte noe tekst med javascript som skal forandre noe siden. (Ja, jeg har snakket med admin og han sier at så lenge det ikke ødelegger noe, så får jeg leke meg med javascript)

 

Slik jeg tenker det, så må jeg lese hele den eksisterende kildekoden inn som en tekstreng, og så bruke str.replace på den for å skifte ut forekomsten med en annen. Deretter må jeg skrive ut den "nye" kildekoden på nytt som erstatter den gamle.

Lenke til kommentar
Et svar hadde gjort meg glad.

 

-Yngve

7213477[/snapback]

 

Vel, problemstillingen du beskriver er ikke håpløs. Tvert i mot er det ganske enkelt å få til det du beskriver. Ved å bruke DOM, kan du få et array av alle <p>-elementer på siden, og deretter iterere over dette. Så kan du sjekke hvert array sitt style, og sjekke om color er det du er ute etter. Deretter er det bare å sette color til den nye verdien.

 

Eksempel:

 

var paragraphs = document.getElementsByTagName('p');

for (var p=0; p<paragraphs.length; p++) {
 var paragraph = paragraphs[p];

 if (paragraph.style.color == '#ff0000') {
   paragraph.style.color = '#00ff00';
 }
}

 

Koden over kan du kjøre i BODY sin onLoad-event.

 

PS! Har ikke testet dette ut selv, men det burde fungere ;)

 

Werner

Endret av wernie
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...