English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
DOM HTML يسمح لـ JavaScript الحصول على تغيير نمط العناصر HTML (CSS).
يمكنك استخدامstyleالصفات تطبيق النمط على العناصر HTML المحددة.
للمغير نمط عنصر HTML، استخدم الجملة التالية:
element.style.property = value
في المثال التالي يتم تغيير<h1>نمط العنصر:
<!DOCTYPE html>
<html>
<h1 id="demo">نمط DOM HTML style</h1>
<script>
document.getElementById("demo").style.color = "blue";
</script>
</html>الاختبار لرؤية‹/›عند ضغط المستخدم على الزر، يغير هذا المثال<h1>نمط العنصر:
<h1 id="demo">نمط DOM HTML style</h1>
<button onclick="myFunc()">انقر</button>
<script>
function myFunc() {
document.getElementById("demo").style.color = "blue";
}
</script>الاختبار لرؤية‹/›عند ضغط المستخدم على الزر، يغير هذا المثال أيضًا<h1>نمط العنصر:
<h1 id="demo">نمط DOM HTML style</h1>
<button onclick="document.getElementById('demo').style.color = 'blue';">انقر</button>الاختبار لرؤية‹/›بالمثل، يمكنك استخدامstyleتطبيق النمط على عنصر HTML.
في المثال التالي، يتم تطبيق خاصية النمط على عنصر يحتوي علىid="demo"للعناصر التي يتم الحصول عليها معلومات النمط (border-top):
var x = document.getElementById("demo").style.borderTop;الاختبار لرؤية‹/›ملاحظة:عند الحصول علىstyleفي معلومات النمط، هذه الخاصية ليست مفيدة جدًا لأنها تعود فقط إلى القواعد النمطية المحددة في الخاصية style للعنصر، وليس القواعد النمطية التي تأتي من مواقع أخرى مثل قواعد النمط المدمجة أو قواعد النمط الخارجية.
للحصول على قيم جميع خصائص CSS المستخدمة في العرض الفعلي للعنصر، يمكنك استخدام ما يلي:window.getComputedStyle()الطريقة:
let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.innerHTML = 'font-size: ' + compStyles.getPropertyValue('font-size');
para.innerHTML += '<br>line-height: ' + compStyles.getPropertyValue('line-height');
para.innerHTML += '<br>padding: ' + compStyles.getPropertyValue('padding');الاختبار لرؤية‹/›يمكنك أيضًا استخدامclassNameالخصائص لاسترداد أو تعيين فئة CSS للعنصر.
document.getElementById("x").className = "para";الاختبار لرؤية‹/›يمكنك أيضًا استخدامclassListيمكنك بسهولة الحصول على، تعيين أو إزالة فئات CSS من العنصر.
في المثال التالي نحو<p>إضافة فئة واحدة إلى العنصرparaالفئة:
var elem = document.getElementById("x");
elem.classList.add("para");الاختبار لرؤية‹/›إضافة عدة فئات إلى<p>العنصر:
var elem = document.getElementById("x");
elem.classList.add("para", "shadow");الاختبار لرؤية‹/›من<p>إزالة فئة واحدة من العنصر:
var elem = document.getElementById("x");
elem.classList.remove("para");الاختبار لرؤية‹/›التبديل بين فئتين<p>العنصر:
var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");الاختبار لرؤية‹/›التبديل إلى فئة واحدة (“فتح”) لإنشاء زر التوجيه الجانبي: