اذهب إلى المحتوى
  • 0

javascript

Abo Hmza

السؤال

Recommended Posts

  • 0

مرحباً بك @Abo Hmza

الميثود getComputedStyle وظيفتها تقوم بتجميع جميع الخصائص والقيم الخاصة بستايل (CSS) عنصر معين مثال بسيط : لإرجاع الخاصية background-color  للعنصر test نقوم بتمرير العنصر إليها كمتغير أول ثم نقوم بالحصول على الخاصية التي نريدها وهي في مثالنا background-color. من خلال الميثود getPropertyValue

var tes = document.getElementById("test");
  var cssCall = window.getComputedStyle(tes, null).getPropertyValue("background-color");

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

مرحبا ...
التابع 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);

يمكنك الوصول لكل قيم الخصائص الأخرى بنفس الطريقة
يمكنك تجربة الأكواد من هنا
بالتوفيق

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 فتغيير الستايل من خلال كود الجافا سكربت أعلاه لن يكون له تأثير 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ الآن قال Abo Hmza:

(" " ," ")document.documentElement.style.setProperty   ممكن حدا يشرحنا هل خاصية هاي في جافاسكريبت 

السلام عليكم ,وظيفته هي تغيير ستايل معين لعنصر معين تأخذ متغييرين الأول هو الخاصية والمتغير الثاني هو القيمة مثال بسيط 

setProperty("background-color", "yellow");

مع مثالك تكون هكذا 

document.documentElement.style.setProperty("background-color", "yellow");

ستقوم بتغيير الخاصية background-color الخاص بالعنصر المحدد إلى اللون الأصفر 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...