لوگو دویکس
ورود / ثبت نام
دستکاری کلاس های CSS با jQuery

دستکاری کلاس های CSS با jQuery

دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 22 مرداد 1401

دستکاری کلاس های CSS با jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. jQuery سه متد addClass() ،()removeClass و toggleClass() را برای دستکاری کلاس های CSS عناصر ارائه می‌دهد.

اضافه کردن کلاس های CSS با جی کوئری

jQuery متد addClass() را برای افزودن یک کلاس CSS به عنصر(های) HTML منطبق ارائه می‌کند. مثالی ساده از ساختار متد addClass() در قطعه کد زیر آمده است:

$(selector).addClass(className);

این متد پارامتری را می‌گیرد که نام یک یا چند کلاس مجزا است تا آن را به عنوان ویژگی class به هر عنصر همسان اضافه کند. ممکن است در یک زمان بیش از یک کلاس به عناصر منطبق اضافه شود، مانند:

$(selector).addClass("Class1 Class2");

محتوای HTML زیر را با کلاس‌های CSS تعریف شده در نظر بگیرید:

<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
<body>
<div class="container">
   <h2>jQuery addClass() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>
</body>

حال اگر از متد addClass() به صورت زیر استفاده کنیم:

$( ".hello" ).addClass("big" );
$( ".goodbye" ).addClass("small" );

نتیجه زیر ایجاد خواهد شد:

<body>
<div class="container">
   <h2>jQuery addClass() Method</h2>
   <div class="hello big">Hello</div>
   <div class="goodbye small">Goodbye</div>
</div>
</body>

لطفاً توجه داشته باشید که متد addClass() جایگزین کلاس موجود نمی‌شود، بلکه به سادگی یک کلاس را اضافه می‌کند.

مثال اضافه کردن کلاس های CSS با جی کوئری

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).addClass("big" );
         $( ".goodbye" ).addClass("small" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
</head>
<body>
   <div class="container">
      <h2>jQuery addClass() Method</h2>
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>
   
   <button>Add Class</button>
</body>
</html>

حذف کردن کلاس های CSS با جی کوئری

jQuery متد removeClass() را برای حذف یک کلاس CSS موجود از عنصر(های) HTML ارائه می‌دهد. مثالی ساده از ساختار متد removeClass() در قطعه کد زیر آمده است:

$(selector).removeClass(className);

این متد پارامتری را می‌گیرد که نام یک یا چند کلاس مجزا است تا آن را به عنوان ویژگی class از هر عنصر همسان حذف کند. ممکن است در یک زمان بیش از یک کلاس از عناصر منطبق حذف شود، مانند:

$(selector).removeClass("Class1 Class2");

محتوای HTML زیر را با کلاس‌های CSS تعریف شده در نظر بگیرید:

<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
<body>
<div class="container">
   <h2>jQuery removeClass() Method</h2>
   <div class="hello big">Hello</div>
   <div class="goodbye small">Goodbye</div>
</div>
</body>

حال اگر از متد removeClass() به صورت زیر استفاده کنیم:

$( ".hello" ).removeClass("big" );
$( ".goodbye" ).removeClass("small" );

نتیجه زیر ایجاد خواهد شد:

<body>
<div class="container">
   <h2>jQuery removeClass() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>
</body>

مثال حذف کردن کلاس های CSS با جی کوئری

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).removeClass("big" );
         $( ".goodbye" ).removeClass("small" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
</head>
<body>
   <div class="container">
      <h2>jQuery removeClass() Method</h2>
      <div class="hello big">Hello</div>
      <div class="goodbye small">Goodbye</div>
   </div>
   <br>
   
   <button>Remove Class</button>
</body>
</html>

تغییر دادن کلاس های CSS با جی کوئری

jQuery متد ()toggleClass را برای تغییر یک کلاس CSS روی عنصر(های) HTML همسان ارائه می‌کند. مثالی ساده از ساختار متد toggleClass() در قطعه کد زیر آمده است:

$(selector).toggleClass(className);

این متد پارامتری را می‌گیرد که نام یک یا چند کلاس مجزا است تا در آن تغییر ایجاد کند.

مثال تغییر دادن کلاس های CSS با جی کوئری

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).toggleClass("big" );
      });
   });
</script>
<style>
   .big{ font-weight: bold; font-size:20px; }
</style>
</head>
<body>
   <div class="container">
      <h2>jQuery toggleClass() Method</h2>
      <div class="hello big">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>
   
   <button>Toggle Class</button>
</body>
</html>

مطالعه مقاله مرجع Html/Css در jQuery برای دسترسی به لیست کامل متدهای Html/Css در جی کوئری به شما پیشنهاد می‌شود؛ مقاله دستکاری کلاس های CSS با jQuery را در اینجا خاتمه می‌دهیم، امیدواریم از مطالعه این مقاله لذت برده باشید. لطفاً نظرات خود را با ما به اشتراک بگذارید و سئوالات خود را در بخش نظرات مطرح کنید.

این مقاله چقدر براتون مفید بود؟

میانگین رتبه : 5/5 - تعداد رای : 1