خواندن مقادیر استایل در jQuery
در توسعه وب، گاهی نیاز داریم مقادیر استایل عناصر HTML را بخوانیم یا تغییر دهیم. jQuery با متدهای ساده‌ای این امکان را فراهم می‌کند. در این مقاله به بررسی روش‌های مختلف برای خواندن مقادیر استایل می‌پردازیم.
متد css() در jQuery
متد css() در jQuery اصلی‌ترین روش برای دسترسی به استایل‌های CSS است. این متد به دو شکل استفاده می‌شود:
- خواندن مقدار یک خاصیت CSS
- تنظیم مقدار یک یا چند خاصیت CSS
مثال ساده برای خواندن عرض یک عنصر:
var width = $('#element').css('width');
| متد |
توضیحات |
| css('property') |
خواندن مقدار یک خاصیت |
| css(['prop1','prop2']) |
خواندن چند خاصیت به صورت آبجکت |
تفاوت‌های مهم در خواندن استایل‌ها
هنگام خواندن مقادیر استایل باید به چند نکته توجه کرد:
- مقادیر عددی همیشه به صورت رشته برگردانده می‌شوند (حتی اگر در CSS به صورت عدد نوشته شده باشند)
- مقادیر رنگ در فرمت RGB یا HEX بازگردانده می‌شوند
- برای خواندن عرض و ارتفاع واقعی عناصر، بهتر است از متدهای width() و height() استفاده شود
برای اطلاعات بیشتر درباره این موضوع می‌توانید به این لینک مراجعه کنید.
خواندن استایل‌های محاسبه شده
گاهی نیاز داریم استایل‌های نهایی اعمال شده روی عنصر (محاسبه شده توسط مرورگر) را بخوانیم. jQuery این کار را به سادگی انجام می‌دهد:
مثال خواندن چند خاصیت به صورت همزمان:
var styles = $('#element').css(['color', 'font-size', 'background-color']);
در این روش، یک آبجکت حاوی تمام مقادیر درخواستی برگردانده می‌شود که می‌تواند در پردازش‌های بعدی استفاده شود.
