استخدام css في الجافاسكربت
في البداية نقوم بتحديد العنصر الذي نريد التعديل عليه, مثلاً عنصر الـ body نعطي الخلفية زرقاء.في ملف html
<body id="body">
في الجافاسكربت
document.body.style.backgroundColor = "blue";
والنتيجه ستكون خلفية الصفحة زرقاء كما حددناها
الشيئ المهم الذي لاحظناه انه في 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)";
html
javascript
النتيجة
شرح المثال السابق
اضفنا صورة بملف الـ 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)";
وهذه هي الطريقة الأفضل و الشائعه اكثر و ستكون بنفس النتيجة بالطريقة الاولى.
لنجعل للصورة خصائص كالعرض و الإرتفاع ...الخ
نضيف 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%)";
javascript
النتيجة
قناتنا التلغرام
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
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
ليست هناك تعليقات:
إرسال تعليق