Getting the height of a group of classes using the style attribute

Question

Getting the height of a group of classes using the style attribute

How can I retrieve the current height of 813px in jQuery from the "style" section?

An example of F12 CSS is shown here: https://i.sstatic.net/4wFfR.jpg

My attempt at achieving this is as follows:

function HandleAccordionControlSizeChanges(isOpened) {
    var currentHeight = 0;

    if (isOpened) {
        currentHeight = $(".dx-accordion-item-opened").height();
    }
    else {
        currentHeight = $(".dx-accordion-item-closed").height();
    }

    return currentHeight;
}

Now, I need to extract the style tag that contains the value 813px.

jquery css

Answer 1

Answer №1

Take a look at this response: How to read and change inline styling "height" using jquery?

You can use the .css() method.

However, according to the official jquery documentation, it is recommended to use ".height()" when performing mathematical operations:

Official jquery documentation on .height()

The difference between using .css( "height" ) and .height() lies in the fact that the latter returns a unit-less pixel value (e.g., 400), while the former retains the units (e.g., 400px). It is advised to use the .height() method when the element's height needs to be used in calculations.

Answer 2

Take a look at this response: How to read and change inline styling "height" using jquery?

You can use the .css() method.

However, according to the official jquery documentation, it is recommended to use ".height()" when performing mathematical operations:

Official jquery documentation on .height()

The difference between using .css( "height" ) and .height() lies in the fact that the latter returns a unit-less pixel value (e.g., 400), while the former retains the units (e.g., 400px). It is advised to use the .height() method when the element's height needs to be used in calculations.

Answer 3

Answer №2

If you set the height using CSS, you have different options to retrieve it in jQuery. You can use .css('height') if you want the value with 'px' appended, or .height() for the raw integer value:

console.log($('.element').css('height'));
console.log($('.element').height());

.element {
  height: 813px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="element">Example</div>

It's important to note that these methods only work on the existing (computed) value. If you set the height dynamically in JavaScript, they won't be able to retrieve it.

To get the height of an element with inline styles, you can use .attr() in jQuery. Alternatively, you can target the actual HTMLElement itself (with [0]) and access the raw style property directly with .style.height:

console.log($('.element').attr('style'));
console.log($('.element')[0].style.height);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="element" style="height: 813px;">Example</div>

Answer 4

If you set the height using CSS, you have different options to retrieve it in jQuery. You can use .css('height') if you want the value with 'px' appended, or .height() for the raw integer value:

console.log($('.element').css('height'));
console.log($('.element').height());

.element {
  height: 813px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="element">Example</div>

It's important to note that these methods only work on the existing (computed) value. If you set the height dynamically in JavaScript, they won't be able to retrieve it.

To get the height of an element with inline styles, you can use .attr() in jQuery. Alternatively, you can target the actual HTMLElement itself (with [0]) and access the raw style property directly with .style.height:

console.log($('.element').attr('style'));
console.log($('.element')[0].style.height);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="element" style="height: 813px;">Example</div>

Getting the height of a group of classes using the style attribute

Answer №1

Answer №2

Similar questions

The inline display property does not function properly with the <li> element

Converting Umbraco Json to a CSS class named "[]"

"The sliding function of the React Bootstrap carousel is malfunctioning as it goes blank just before transitioning

Font sizes may vary depending on whether the site is accessed with or without the "www" prefix

What is the best way to create a slideshow that automatically starts upon loading and pauses when hovered over?

A complete div component with a minimum height that is sandwiched between a fixed size header and

The navigation menu dissolves into hiding at the uppermost part of the page upon scrolling upwards on iOS devices

Swapping the non-DOM element text with another content

Resetting several sticky titles after displaying and hiding elements

The output I receive when making a jQuery POST request is a response generated by my index controller, although I am not specifically directing it there as I have

Difficulty arises from the syntax error in incorporating the setTimeout function into an already existing jQuery script

The consistency of values remains constant throughout all Ajax requests

Container with adjacent gradient CSS shape

What's the best way to undo a CSS transition animation when deleting an active class?

Utilizing CSS to Implement a Background Image

The problem with SVG animation using Velocity.js is that it is throwing an error stating that

Attach a Material-UI Popper component to a customized edge label in a React Flow

Switching between various quantities of inputs in each row using Bootstrap V3

Troubleshooting CSS issues in HTML pages

Trying to work through solving the issue of accessing document.frames["someframe"].function in Chrome instead of IE