تغيير عناصر HTML

By · ·


يمكن تغيير عناصر HTML من خلال لغة JavaScript و HTML DOM و الأحداث .


 تغيير عناصر HTML


تغير لغة JavaScript و HTML DOM المحتوى الداخلي و الواحق في صفحة HTML .

يغير المثال التالي خلفية الصفحة للعنصر <body> .

مثال
<html>
<body>
<script type="text/javascript">
document.body.bgColor="Orange";

</script>
</body>
</html>



تغيير النص لعناصر HTML – innerHTML


أسهل طريقة لتعديل محتوى العناصر من خلال استخدام خاصية innerHTML .

يغير المثال التالي النص للعنصر <p>

مثال
<html>
<body>
<p id="p1">مرحباً بكم</p>

<script type="text/javascript">

document.getElementById("p1").innerHTML="تم تغيير النص الأصلي";

</script>
</body>
</html>




تغيير عناصر HTML من خلال الأحداث


تسمح لك الأحداث باستدعاء الأكواد عند حدوث حدث معين .

يتم توليد الأحداث من خلال المتصفحات عند ضغط المستخدم على العنصر أو عند تحديث الصفحة أو عند ارسال نموذج معين .

يمكنك قراءة المزيد عن الأحداث في الدرس التالي .

يغير المثال التالي خلفية لون الصفحة للوسم <body> عند الضغط على زر الارسال :
<html>
<body>
<input type="button" onclick="document.body.bgColor='lavender';"

value="تغيير خلفية الصفحة" />

</body>
</html>




تغيير نص العنصر من خلال الكود الوظيفي Function

يستخدم المثال التالي الكود والوظيفي لتغير النص الموجود في العنصر <p> عند الضغط على الزر :

مثال
<html>
<head>
<script type="text/javascript">
function ChangeText()
{
document.getElementById("p1").innerHTML="النص الجديد المعدل";
}

</script>
</head>
<body>

<p id="p1">مرحباً بكم</p>

<input type="button" onclick="ChangeText()" value="تغيير النص" />

</body>
</html>




استخدام كائن التصميم


يقدم كائن التصميم لكل عنصر HTML تصميمه الخاص .

يستخدم المثال التالي الكود الوظيفي function لتغيير تصميم العنصر <body> عند الضغط على الزر :

مثال
<html>
<head>
<script type="text/javascript">

function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}

</script>
</head>
<body>

<input type="button" onclick="ChangeBackground()"value="تغيير خلفية الصفحة" />

</body>
</html>



تغيير اللون و الخط للعناصر


يستخدم المثال التالي الكود الوظيفي function لتغيير تصميم العنصر <p> عند الضغط على الزر :

مثال
<html>
<head>
<script type="text/javascript">

function ChangeStyle()
{
document.getElementById("p1").style.color="blue";
document.getElementById("p1").style.fontFamily="Tahoma";
}

</script>
</head>
<body>

<p id="p1">مرحباً بكم</p>
<input type="button" onclick="ChangeStyle()" value="تغيير التصميم" />

</body>
</html>


ليست هناك تعليقات:

إرسال تعليق