Guide to Getting the Original CSS Value Without Considering Mobile Values

Sometimes in web design projects, you may need to retrieve the original value of a particular CSS property without affecting the media queries and mobile versions. Using jQuery can be very helpful for this task.

Assume you have an element that is bound to different media queries with varying values for width or height. However, you want to extract the original value assigned to that element in CSS. In this case, jQuery allows you to easily access this value without complications.

A method you can use is to leverage the .css() function in jQuery. This function lets you retrieve the current value of a specific CSS property, but this value is under the influence of media queries. For obtaining the original value, you can use a specific technique to overcome these limitations.

You can easily access the original value using JavaScript and jQuery, getting the base values you need and even allowing for adjustments as needed; you can modify them or replace them with new styles. These adjustments will help you improve the performance and responsiveness of your web applications across all devices effectively.

In addition, we will review an example of using this method and explain it line by line so that you can easily and quickly use this technique in your projects.

<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>

Line-by-Line Explanation