Retrieve CSS height using Jquery, based on the declared value rather than the computed value

Question

Retrieve CSS height using Jquery, based on the declared value rather than the computed value

In a previous version of jQuery, the default behavior was different. When I use .css("height") and .height(), it gives me the computed height instead of what I actually want. I only need the height value if it is explicitly declared in the CSS for that element.

Maybe if the height is not declared anywhere, it could return 'auto' as it does for top and left sometimes...

For instance, consider my CSS code:

.element{
    margin-left:5px;
    color:red;
}

The result of .css("margin-left") is "5px", but .css("height") gives me 20 even though it's not explicitly set...

Appreciate any insights!

jquery html css

Answer 1

Answer №1

When it comes to CSS height and width, the browser handles the calculations automatically.

To view these values, you can navigate to the "Computed styles" tab in Chrome Developers Tools (F12).

For more information, refer to the following documentation:

jQuery.width()

The jQuery.width() method allows you to retrieve the current computed width for the first element in a set of matched elements or set the width of every matched element.

It's important to note that there is a distinction between .css(width) and .width(). The latter provides a unit-less pixel value (e.g., 400), while the former retains the value with units intact (e.g., 400px)

However, if you require the correct CSS value, it's recommended not to rely solely on jQuery.

If we consider an example with HTML:

<div id="elem" style="height: auto"></div>

We can use JavaScript like this:

$('#elem').get(0).style.height    // "auto"

Another scenario with HTML:

<div id="elem"></div>

JavaScript would output:

$('#elem').get(0).style.height    // ""

A general function to handle this:

var height = function(elem){
      return $(elem).get(0).style.height === "" ? $(elem).height() : $(elem).get(0).style.height;
}

Answer 2

When it comes to CSS height and width, the browser handles the calculations automatically.

To view these values, you can navigate to the "Computed styles" tab in Chrome Developers Tools (F12).

For more information, refer to the following documentation:

jQuery.width()

The jQuery.width() method allows you to retrieve the current computed width for the first element in a set of matched elements or set the width of every matched element.

It's important to note that there is a distinction between .css(width) and .width(). The latter provides a unit-less pixel value (e.g., 400), while the former retains the value with units intact (e.g., 400px)

However, if you require the correct CSS value, it's recommended not to rely solely on jQuery.

If we consider an example with HTML:

<div id="elem" style="height: auto"></div>

We can use JavaScript like this:

$('#elem').get(0).style.height    // "auto"

Another scenario with HTML:

<div id="elem"></div>

JavaScript would output:

$('#elem').get(0).style.height    // ""

A general function to handle this:

var height = function(elem){
      return $(elem).get(0).style.height === "" ? $(elem).height() : $(elem).get(0).style.height;
}

Answer 3

Answer №2

To utilize this piece of code, simply assign an id to the element and then execute the following script:

if (document.getElementById("element").style.height == null || document.getElementById("element").style.height == "") {
  alert("no height");
}else{
  alert(document.getElementById("element").style.height);
}

.element {
  width: 100%;
  color: red;
  word-break: break-all;
}

<div id="element" class="element">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
  elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
  Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit
  vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
  Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>

Answer 4

To utilize this piece of code, simply assign an id to the element and then execute the following script:

if (document.getElementById("element").style.height == null || document.getElementById("element").style.height == "") {
  alert("no height");
}else{
  alert(document.getElementById("element").style.height);
}

.element {
  width: 100%;
  color: red;
  word-break: break-all;
}

<div id="element" class="element">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
  elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
  Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit
  vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
  Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>

Answer 5

Answer №3

If you prefer, JavaScript also allows for targeting elements by their class name. Here's a quick example:

alert(document.getElementsByClassName("YourClassName")[0].style.width)

Instead of the computed width, this will show the exact value set for the width property.

Answer 6

If you prefer, JavaScript also allows for targeting elements by their class name. Here's a quick example:

alert(document.getElementsByClassName("YourClassName")[0].style.width)

Instead of the computed width, this will show the exact value set for the width property.

Retrieve CSS height using Jquery, based on the declared value rather than the computed value

Answer №1

Answer №2

Answer №3

Similar questions

Having difficulties with JavaScript's if statements

Ensure that the child div remains at the bottom of the parent div

Trigger notifications exclusively for specific hyperlink texts that are selected

The error message that keeps popping up - "jQuery is loading with dojoConfig, but $

Emphasize the most recent file during the document upload process and ensure the scroll bar moves accordingly to the document

Building four frames with HTML

Having issues with the basic KnockoutJS binding not functioning as expected

utilize dynamic variable within the template's views

Is the × symbol added from JavaScript not able to be clicked on?

Top method for achieving a smooth transition in a loading CSS3 animation

What is the best way to use PHP and Ajax to create a registration page that can verify the availability of a username without requiring a page refresh?

Tips for successfully passing an array containing an object to an AJAX action

Stylish dropdown menu design inspired by W3CSS website

Modify input value using jQuery upon moving to the next step

Guidelines for utilizing the php mail() function

issue with animation occurs when the value changes while the setTimeout timer is still running

Angular - Acquire reference to the <audio> element

Toggle class on a span element within an anchor tag

Guide to centering a button on an image using bootstrap 4

The close() function in the Fancybox success callback is not functioning properly when used with ajax