كيفية استخدام وسوم الـ css في الجافاسكربت بسهولة JavaScript الدرس |21| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الجمعة، 10 أبريل 2020

كيفية استخدام وسوم الـ css في الجافاسكربت بسهولة JavaScript الدرس |21|

كيفية استخدام الـ css في الجافاسكربت javascript بسهولة الدرس |21|

استخدام css في الجافاسكربت

في البداية نقوم بتحديد العنصر الذي نريد التعديل عليه, مثلاً عنصر الـ body نعطي الخلفية زرقاء.

في ملف html
<body id="body">
في الجافاسكربت
document.body.style.backgroundColor = "blue";

والنتيجه ستكون خلفية الصفحة زرقاء كما حددناها
كيفية استخدام الـ css في الجافاسكربت javascript بسهولة الدرس |21|

الشيئ المهم الذي لاحظناه انه في css عندما نريد تغيير الخلفية يكون وسم تغييرها هو background-color وبعده نقطتان ثم اعطاءه اللون, أما في الجافاسكربت كتبناه بدون فاصله بين الكلمتين و الحرف الأول من الكلمه الثانية حرف كبير backgroundColor والقيمة تكون ضمن اشارتين اقتباس.
مثلاً, الوسم الآتي يكتب في css هكذا list-style-type أما في جافاسكربت يكتب listStyleType.

مثال

الطريقة الأولى

سوف نضيف عنصر img في ملف html وليكن اسم الصورة tech
<body id = "body">
      <img src="tech.jpg">
</body>

وفي ملف الجافاسكربت
document.getElementById("body")
.style.backgroundImage = "linear-gradient(to left, #000000e3, #232222d9)";

كيفية استخدام الـ css في الجافاسكربت javascript بسهولة الدرس |21|
html
كيفية استخدام الـ css في الجافاسكربت javascript بسهولة الدرس |21|
javascript
كيفية استخدام الـ css في الجافاسكربت javascript بسهولة الدرس |21|
النتيجة

شرح المثال السابق

اضفنا صورة بملف الـ html و اسمها كان tech.jpg و اعطينا id للعنصر body و في ملف الجافاسكربت استدعينا الأيدي عبر document.getElementById و كتبنا له الآيدي بين قوسين كما كتبناه وهو "body" و اخترنا style لإستدعاء الـ css في ملف الجافاسكربت و اخترنا العنصر وهو backgroundImage و اخترنا القيمة خلفية متعددة الألوان, ووضعنا اللونين و اتجاه الالوان هو to left من جهة اليسار.

الطريقة الثانية

عبر انشاء متغير var و ربط العنصر به.

var body =  document.getElementById("body");
body.style.backgroundImage =  "linear-gradient(to left, #000000e3, #232222d9)";

وهذه هي الطريقة الأفضل و الشائعه اكثر و ستكون بنفس النتيجة بالطريقة الاولى.
كيفية استخدام الـ css في الجافاسكربت javascript بسهولة الدرس |21|

لنجعل للصورة خصائص كالعرض و الإرتفاع ...الخ
نضيف id للصورة من ملف html اولاً
<body id = "body">
      <img src="tech.jpg" id="logo">
</body>

و من ملف الجافاسكربت نضيف الخصائص

var body =  document.getElementById("body");
body.style.backgroundImage =  "linear-gradient(to left, #000000e3, #232222d9)";
var logo = document.getElementById("logo");
logo.style.width = "100px";
logo.style.position = "absolute";
logo.style.top = "50%";
logo.style.left = "50%";
logo.style.transform = "translate(-50%, -50%)";

كيفية استخدام الـ css في الجافاسكربت javascript بسهولة الدرس |21|
javascript
كيفية استخدام الـ css في الجافاسكربت javascript بسهولة الدرس |21|
النتيجة

قناتنا التلغرام
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997

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

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام