javascript

مرحباً بك @Abo Hmza

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

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

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

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

طيب هل استطيع عن طريق هذه الخاصية تغير نص معين اوخط اة احتى اختفاء النص تافيدونا بارك االه بكم

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

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

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

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

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

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

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

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

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