recent
أخبار ساخنة

كيفية استخدام وسوم الـ 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
google-playkhamsatmostaqltradent