Abo Hmza نشر 2 يونيو 2020 أرسل تقرير مشاركة نشر 2 يونيو 2020 سلام عليكم مين يقدر يشرحنا او عطينا لينك عربي لشرح هذه الخاصية في جافاسكريبتgetComputedStyle 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mohamd Imran نشر 2 يونيو 2020 أرسل تقرير مشاركة نشر 2 يونيو 2020 مرحباً بك @Abo Hmza الميثود getComputedStyle وظيفتها تقوم بتجميع جميع الخصائص والقيم الخاصة بستايل (CSS) عنصر معين مثال بسيط : لإرجاع الخاصية background-color للعنصر test نقوم بتمرير العنصر إليها كمتغير أول ثم نقوم بالحصول على الخاصية التي نريدها وهي في مثالنا background-color. من خلال الميثود getPropertyValue var tes = document.getElementById("test"); var cssCall = window.getComputedStyle(tes, null).getPropertyValue("background-color"); 3 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 سمير عبود نشر 2 يونيو 2020 أرسل تقرير مشاركة نشر 2 يونيو 2020 مرحبا ... التابع getComputedStyle هو تابع خاص بالكائن window يٌمرر له عنصر كparameter و يقوم بإرجاع كائن يحتوي على قيم لخصائص ال css المطبقة على العنصر الممرر وهذا ما تم ذكره في توثيق مطورين موزيلا للإستفادة أكثر يمكنك زيارة التوثيق من هنا على سبيل المثال بإمكاننا إنشاء عنصر فقرة بهذا الشكل <p>Window.getComputedStyle()</p> و إعطاؤه التنسيق التالي p { width: 400px; margin: 0 auto; padding: 20px; font: 2rem/2 sans-serif; text-align: center; background: red; color: white; } و بإستخدام جافاسكربت يمكننا جلب خصائص ال css المطبقة على العنصر p بهذا الشكل و تغييرها أو إسنادها لعنصر اخر //هنا قمنا بجلب العنصر p var paragraphElem = document.querySelector('p'); // هنا قمنا بجلب قيم خصائص ال css وقمنا بتخزينهم في المتغير styles var styles = window.getComputedStyle(paragraphElem); // هنا أنشأنا عنصر و هو قائمة غير مرتبة var ulElem = document.createElement('ul'); // هنا قمنا بإنشاء عنصر li var widthLiElem = document.createElement('li'); // هنا قمنا بإنشاء عنصر li var colorLiElem = document.createElement('li'); // هنا أنشأنا نصين و جلبنا قيمة كل من عرض الفقرة و لونها بإستعمال الكائن الذي خزنا فيه قيم خصائص التنسيق للفقرة var widthTextNode = document.createTextNode("Paragraph width: " + styles.getPropertyValue('width')), colorTextNode = document.createTextNode("Paragraph color: " + styles.getPropertyValue('color')) // أضفنا العناصر للقائمة الغير مرتبة widthLiElem.appendChild(widthTextNode); ulElem.appendChild(widthLiElem); colorLiElem.appendChild(colorTextNode); ulElem.appendChild(colorLiElem); // أضفنا القائمة الغير مرتبة لل Dom لتظهر تحت الفقرة paragraphElem.parentNode.insertBefore(ulElem, paragraphElem.nextSibling); يمكنك الوصول لكل قيم الخصائص الأخرى بنفس الطريقة يمكنك تجربة الأكواد من هنا بالتوفيق 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Abo Hmza نشر 4 يونيو 2020 الكاتب أرسل تقرير مشاركة نشر 4 يونيو 2020 طيب هل استطيع عن طريق هذه الخاصية تغير نص معين اوخط اة احتى اختفاء النص تافيدونا بارك االه بكم 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mohamd Imran نشر 5 يونيو 2020 أرسل تقرير مشاركة نشر 5 يونيو 2020 بتاريخ 5 ساعات قال Abo Hmza: طيب هل استطيع عن طريق هذه الخاصية تغير نص معين اوخط اة احتى اختفاء النص تافيدونا بارك االه بكم السلام عليكم أخي @Abo Hmza هذه الخاصية فقط لإرجاع الستايل المستخدم لعنصر معين وليس لتغيير الستايل ,على أي حال لتغيير الستايل لعنصر معين من خلال javascript يمكنك عمل التالي مع تغيير العنصر div إلى إسم العنصر الذي تريد تغيير الستايل له مثال بسيط var el = document.querySelector('div'); el.style.backgroundColor = 'green'; el.style.display = 'none'; el.style.fontSize="14px"; في المثال نقوم بتغيير لون الخلفية للعنصر div إلى الأخضر ,وتغيير إظهار العنصر إلى none ,لكن ملاحظة بسيطة في حالة أن العنصر الذي تريد تغيير الستايل له يحتوي على الخاصية !important أي إن كان يوجد له ستايل محدد مسبقا يحمل القيمة !important فتغيير الستايل من خلال كود الجافا سكربت أعلاه لن يكون له تأثير 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Abo Hmza نشر 9 يونيو 2020 الكاتب أرسل تقرير مشاركة نشر 9 يونيو 2020 (" " ," ")document.documentElement.style.setProperty ممكن حدا يشرحنا هل خاصية هاي في جافاسكريبت 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mohamd Imran نشر 9 يونيو 2020 أرسل تقرير مشاركة نشر 9 يونيو 2020 بتاريخ الآن قال Abo Hmza: (" " ," ")document.documentElement.style.setProperty ممكن حدا يشرحنا هل خاصية هاي في جافاسكريبت السلام عليكم ,وظيفته هي تغيير ستايل معين لعنصر معين تأخذ متغييرين الأول هو الخاصية والمتغير الثاني هو القيمة مثال بسيط setProperty("background-color", "yellow"); مع مثالك تكون هكذا document.documentElement.style.setProperty("background-color", "yellow"); ستقوم بتغيير الخاصية background-color الخاص بالعنصر المحدد إلى اللون الأصفر 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Abo Hmza
سلام عليكم مين يقدر يشرحنا او عطينا لينك عربي لشرح هذه الخاصية في جافاسكريبتgetComputedStyle
رابط هذا التعليق
شارك على الشبكات الإجتماعية
6 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.