IntroductionDid du, at du kunne ændre værdien af en HTML image source attribut? Hvis du gør dette, vil det billede, der vises på browseren ændres. I denne artikel vil jeg vise dig effekten af at ændre værdien af kilden attribut af billedet tag.You brug grundlæggende viden i HTML, CSS og JavaScript for at forstå denne article.Note: Hvis du ikke kan se koden, eller hvis du tror der mangler noget i denne artikel (brudt link, billede fraværende), bare kontakte mig på [email protected]. Det vil sige, kontakt mig for det mindste problem, du har om, hvad du er reading.html ElementAn HTML-element er produceret af enten en eller to tags. Et HTML-element er en del af den webside, du ser på browseren. Billedet er for eksempel fremstillet af en tag. Den § element på den anden side er produceret af to tags (start og slut-tag). Præsentationen af et element er produceret af CSS. Præsentation betyder udseende, placering og størrelse af en element.
The billede Elementa simple tag for billedet element: Med billedet tag, ville CSS præsentationen gives ved noget som img # ID {bredde: 200px; højde: 200px} I dette særlige præsentation positionen er ikke givet, men størrelsen er givet. Under denne betingelse, hvis du ændrer værdien af src attribut, du vil se et andet billede på browseren. Denne funktion er meget praktisk. Ændring af Source AttributeThe DOM og JavaScript giver dig mulighed for at ændre værdien af attributten billedkilden. Syntaksen er: document.getElementById (ID) .src = URLThe udtrykket, "document.
getElementById (id)" returnerer en reference til billedet objektet. "src" er kilden egenskab af billedet objektet. ID og URL skal hver især være i anførselstegn. Id er identifikationen af billedet object.Resulting Forenklet CodeIf det ikke var muligt at ændre værdien af kilden attribut af et billede, så at ændre et billede, du ville have til at ændre hele tag. Dette ville føre til en mere kompliceret code.Advantages for at ændre værdien af Source Attribute- Det fører til en forenklet code.- Præsentationen af det oprindelige billede bevares.
Når du ændrer værdien af kildeattributten er størrelsen og positionen af det foregående billede opretholdes. Dette kan være meget nyttigt i et billede galleri, hvor du er nødt til at præsentere en stor størrelse billede for forskellige images.ExampleWhen du klikker på knappen for følgende kode, ville det viste billede ændres. Prøv koden med to af dine egne billeder. Billedet og knap er i en HTML-objekt element. Billedet er i et andet formål element indlejret i den ydre objekt. Den ydre objekt er flød rigtigt. "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.
dtd">