Sa schimbam culoarea paragrafelor
Cream un document html pe care il vom numi changeTagColor.htm.
In tag-ul "head" al paginii, vom introduce urmatorul cod javascript:
<script type="text/javascript">
<!--
function changeTagColor()
{
//cream o variabila numita "tagList" care va cauta in document toate elementele
"p"
var tagList = document.all.tags("p");
//aici vom parcurge toate elementele "p" din document
for (var i=0; i < tagList.length; i++)
//aici vom aplica textului continut de fiecare element "p" din pagina, culoarea
verde
tagList[i].style.color = "green";
}
//-->
</script>
Dupa care, in tag-ul "body" vom introduce urmatoarele paragrafe:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
Apoi vom introduce si un buton iar in evenimentul "onclick" vom apela functia creata in script:
<input type="button" value="Schimba culoarea" onclick="changeTagColor();" />
Acum sa deschidem pagina intr-o fereastra de browser si sa apasam pe buton; veti vedea cum textul din pagina se va transforma in culoarea verde!
Cool!
Asta e tot !
Acum, codul sursa al paginii noastre ar trebui sa arate astfel:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>changeTagColor</title>
<script type="text/javascript">
<!--
function changeTagColor()
{
//cream o variabila numita "tagList" care va cauta in document toate elementele
"p"
var tagList = document.all.tags("p");
//aici vom parcurge toate elementele "p" din document
for (var i=0; i < tagList.length; i++)
//aici vom aplica textului continut de fiecare element "p" din pagina, culoarea
verde
tagList[i].style.color = "green";
}
//-->
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<input type="button" value="Schimba culoarea" onclick="changeTagColor();" />
</body>
</html>
No comments:
Post a Comment