تغيير عناصر HTML

يمكن تغيير عناصر 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>