راهنمای دریافت مقدار اصلی CSS بدون در نظر گرفتن مقدار موبایل

گاهی اوقات در پروژه‌های طراحی وب ممکن است نیاز داشته باشید که مقدار اولیه یک خاصیت CSS را بدون تأثیر مدیا کوئری‌ها و نسخه موبایل دریافت کنید. استفاده از jQuery برای این کار می‌تواند بسیار مفید باشد.

فرض کنید شما یک عنصر دارید که بسته به مدیا کوئری‌های مختلف، مقادیر متفاوتی برای ارتفاع یا عرض دارد. اما شما می‌خواهید مقدار اصلی که در CSS به آن عنصر اختصاص داده شده است را بیابید. در این مواقع، jQuery با توابعی که دارد، به شما این امکان را می‌دهد تا به سادگی به این مقادیر دسترسی پیدا کنید.

روشی که می‌توانید استفاده کنید، این است که از تابع .css() در jQuery بهره ببرید. این تابع به شما این امکان را می‌دهد که مقدار فعلی یک خاصیت CSS را دریابید، اما این مقدار تحت تأثیر مدیا کوئری‌هاست. برای دریافت مقدار اصلی، می‌توانید از یک تکنیک خاص استفاده کنید تا این محدودیت‌ها را دور بزنید.

شما می‌توانید به راحتی با استفاده از جاوا اسکریپت و jQuery، به مقادیر پایه دست یابید و حتی در مواقع نیاز، آن‌ها را تغییر دهید یا با استایل‌های جدید جایگزین کنید. این تغییرات به شما کمک خواهد کرد تا اپلیکیشن‌های وب قدرتمند و انعطاف‌پذیری بسازید که بر روی تمامی دستگاه‌ها به خوبی اجرا می‌شوند.

در ادامه، به بررسی یک مثال کاربردی از این روش خواهیم پرداخت و خط به خط آن را توضیح خواهیم داد تا بتوانید به سادگی و به سرعت از این تکنیک در پروژه‌های خود بهره‌برداری کنید.

<style>
  .box {
    width: 200px;
    height: 200px;
  }

  @media (max-width: 600px) {
    .box {
      width: 100px;
      height: 100px;
    }
  }
</style>

<div class="box"></div>
<button id="getCssValue">Get CSS Value</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $("#getCssValue").click(function() {
      var originalWidth = $(".box").css('width');
      console.log("Original Width: " + originalWidth);
    });
  });
</script>

توضیح خط به خط کد