CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bas
Bas

Reputation: 2210

jQuery calculating 2 different HTML element attributes (height + margin-bottom)

I'm trying to get the height and the margin-bottom of a element, and count them up. But so far, i can only do this:

var sum = $('div').height() + 25);

That 25 i had to look up myself in the stylesheet at 

div {
   height: 75px;
   margin-bottom: 25px;
}

How can i make this automaticly?

Because when i try:

var sum = $('div').height() + $('div').css('margin-bottom');

It isnt returning any value.

Upvotes: 0

Views: 151

Answers (3)

tmcc
tmcc

Reputation: 1020

There are many 'div' elements in a document(usually). You need a better selector for the one you want. Fiddle for value in console.log

<div id="TestId" class="test"></div>

.test
{
height:40px;
margin:5px;
}

var tester = $("#TestId");
var eleHeight = tester.outerHeight();
var marginBottomHeight = tester.css('margin-bottom').replace("px", "")
console.log(eleHeight + parseInt(marginBottomHeight));

Upvotes: 0

William George
William George

Reputation: 6785

$('div').css('margin-bottom') will have the px attached. Try and use something like parseInt()

var sum = $('div').height() + parseInt($('div').css('margin-bottom'), 10);

W

Upvotes: 0

Hamza Kubba
Hamza Kubba

Reputation: 2269

You're probably looking for http://api.jquery.com/outerheight/ which includes the margins, padding and borders (all which count towards the total height, along with the base height). Alternatively, you can use parseInt($('div').css('margin-bottom')) because the value is a css string that looks something like this: 100px. parseInt() would extract the 100 from that css, which is what you want.

In addition, you're kinda doing it wrong in general. Are you looking for the sum of all the heights of all the div elements? Or does your page have only one div?

Upvotes: 3

Related Questions