كيفية تبديل الأنماط

تبديل الأنماط

الخطوة الأولى - إضافة HTML:

عند إضافة الأسماء إلى id="myDIV" تبديل بين عناصر div (في هذا المثال، نستخدم الزر للتبديل بين الأسماء).

<button onclick="myFunction()">جرب</button>
<div id="myDIV">
  هذا عنصر DIV.
</div>

الخطوة الثانية - إضافة CSS:

إضافة اسم فئة للتبديل:

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

الخطوة الثالثة - إضافة JavaScript:

الحصول id="myDIV" عنصر <div>، وفي "mystyle" تبديل بين الأنماط:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

جرب بنفسك

الصفحات ذات الصلة

دليل التعليمات:كيفية إضافة فئة

دليل التعليمات:كيفية حذف فئة

دليل مرجعي:خصائص classList لـ HTML DOM Element