Hur man ändra stilsorten färgar med JavaScript

July 10

Hur man ändra stilsorten färgar med JavaScript


Med hjälp av JavaScript, kan en webbutvecklare dynamiskt ändra innehåll och formatattribut på en webbsida. Att ändra färgen på ett stycke text på en sida är ett enkelt men effektivt sätt att locka användarens uppmärksamhet, till exempel, kan du ändra färg på en etikett på ett formulärfält till rött om användaren inte har lämnat uppgifter om att han är skyldiga att lämna.

Instruktioner

1 I din favorit textredigerare, öppna HTML-filen som innehåller den text du vill ändra.

2 Identifiera text vars färg du vill ändra. Denna text, och endast denna text, skall ingå i en egen HTML-element, såsom ett stycke tagg (<p>), ett blockelement (<div>) eller en inline element (<span>), eftersom du kommer att gälla färgen till detta element och detta kommer att ändra färgen på all text i det.

Om texten du vill ändra är redan i sin egen element (t.ex. <p> Ändra färg på hela denna punkt </ p>), sedan gå vidare till nästa steg.

Om du bara vill ändra färg på ett fragment av text i ett element (till exempel ordet \ "färg \" i <p> ​​Ändra färg på en text </ p>), sedan omge detta fragment i en < span> taggen för att isolera den. För föregående exempel, skulle du ha <p> Ändra <span> färg </ span> av någon text </ p>.

3 Tilldela en identifierare till element som innehåller texten som du vill ändra med hjälp av \ "id \" attribut. Denna identifierare får inte tillhöra någon annan element på sidan. Till exempel:

<P> Ändra <span id = \ "colorize_me \"> färg </ span> av någon text </ p>

4 Lägg till en <script> tag i dokumentets <head> -element som innehåller en funktion för att ändra färgen på texten:

<Script type = \ "text / javascript \">
funktion changeTextColor ()
{
}
</ Script>

5 I kroppen av denna funktion (mellan klammerparenteserna), lägga till följande kodrad:

document.getElementById (\ "colorize_me \"). style.color = \ "red \"

Ersätt \ "colorize_me \" med identifierare som du tilldelade i steg 3, och ersätta \ "red \" med den färg du vill göra texten.

Den \ "handling \" referens returnerar det element som representerar hela HTML-dokument. Ringa \ "getElementById \" returnerar elementet som har den angivna identifierare, och därifrån kan du komma åt \ "stil \" egendom, som innehåller CSS (Cascading Style Sheets) egenskaper, varav en är \ "färg (se Medel).\"

6 Kalla denna funktion från en lämplig plats i dokumentet. Som ett exempel skapar följande rad en länk som kommer att förändra textfärgen när användaren klickar på det:

<a href=\"javascript:void(0)\" onclick=\"changeTextColor();\"> Klicka mig </a>


        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2021 Astrixsoft.com | Contact us: webmaster# astrixsoft.com