متد ()css در jQuery

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

متد ()css در jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. jQuery متد ()css را برای دستکاری ویژگی‌های CSS عناصر منطبق ارائه می‌کند. متد ()css جی کوئری محتوای شیء جی کوئری را تغییر نمی‌دهد اما از آن‌ها برای دریافت و تنظیم خصوصیات CSS روی عناصر DOM استفاده می‌کند.

بررسی عملیات Get در متد ()css

متد css() می‌تواند برای به دست آوردن مقدار یک ویژگی CSS مرتبط با اولین عنصر HTML منطبق استفاده شود. نحو متد css() در زیر آمده است:

$(selector).css(propertyName);

jQuery مقدار صحیح را برای هر دو css (“background-color”) و css (“backgroundColor”) درک کرده و برمی‌گرداند.

مثال

این مثال باید رنگ پس‌ زمینه اولین عنصر <div> را برگرداند:

<!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(){
         alert("Background color = " + $("div").css("background-color"));
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Click the below button to see the result:</p>

   <div style="background-color:#9c9cff;">Blue</div>
   <div style="background-color:#93ff93;">Green</div>

   <button>Get CSS Property</button>
</body>
</html>

بررسی عملیات Set در متد ()css

متد css() می‌تواند برای تنظیم مقدار یک یا چند ویژگی CSS مرتبط با عنصر HTML منطبق استفاده شود. نحو متد css() در زیر آمده است:

$(selector).css(propertyName, value);

در اینجا هر دو پارامتر مورد نیاز هستند، propertyName یک نام ویژگی CSS را نشان می‌دهد، در حالی که value مقدار معتبر خاصیت را نشان می‌دهد.

مثال

در اینجا رنگ اولین عنصر <div> منطبق را می‌گیریم و رنگ متن همه عناصر <p> را با استفاده از رنگ پس زمینه <div> تغییر می‌دهیم:

<!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(){
         var color = $("div").css("background-color");
         $("p").css("color", color);
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Click the below button to see the result:</p>

   <div style="background-color:#9c9cff;">Blue</div>
   <div style="background-color:#93ff93;">Green</div>

   <button>Set CSS Property</button>
</body>
</html>

تنظیم چند ویژگی با متد ()css در jQuery

شما می‌توانید چندین ویژگی CSS را روی عناصر منطبق با استفاده از یک متد ()css اعمال کنید. شما می‌توانید هر تعداد ویژگی را که دوست دارید در یک call اعمال کنید.

در زیر نحو متد css() برای تنظیم چندین ویژگی CSS آمده است:

$(selector).css({propertyName1:value1, propertyName2:value2,...});

مثال

مثال زیر رنگ پس‌ زمینه همه عناصر <div> را روی “#fb7c7c;” تنظیم می‌کند و اندازه فونت را به 25 پیکسل تغییر می‌دهد:

<!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(){
         $("div").css({"background-color":"#fb7c7c", "font-size": "25px"});
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Click the below button to see the result:</p>

   <div style="background-color:#9c9cff;">Blue</div>
   <div style="background-color:#93ff93;">Green</div>

   <button>Set CSS Property</button>
</body>
</html>

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

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

اولین امتیاز را ثبت کنید😊