Get width of specific div and use as another div's height?

Question

I have two div's. #divA & #divB.

#divA has a width of 100% and I want to get the px value of the div and apply it to #divB as it's height CSS. I've tried using .offsetWidth but to no avail. Can anybody help me?

Have you tried $("#divB").height($("#divA").width()); ? – Lajos Arpad Jan 11 '14 at 02:34 — Lajos Arpad, Jan 11 '14 at 02:34

score 2 · Accepted Answer · answered Jan 11 '14 at 02:10

2

use .css('width') to keep units intact (ex: 400px), use .width() to get just the numerical value (ex: 400) for use in mathematical computations.

for what you're doing:

var divAWidth = $('#divA').css('width');
$('#divB').css('height', divAWidth);

if you're getting mathematical:

var divAWidthNumber = $('#divA').width();
var halfThatWidth = divAWidthNumber / 2;

answered Jan 11 '14 at 02:10

erikrunia

2,371
1
15
22

Excellent! Thank you! I have it working, just wondering if it's possible to implement to a style sheet rather than a page? – 50dollanote Jan 11 '14 at 15:37
1

If you mean assign the width to the height via CSS instead of JavaScript i would say no, but I'm sure somebody smarter may chime in and school us both. :-) – erikrunia Jan 11 '14 at 15:43

mkaminsky · Answer 2 · 2014-01-11T16:12:58.980

1

If you don't want to use jQuery:

var getwidth = document.getElementById("div1").style.width;
document.getElementById("div").style.height = getWidth;

With jQuery

var getwidth = $("#div1").width();

EDIT

$("#div").height(getwidth);

edited Jan 11 '14 at 16:12

answered Jan 11 '14 at 02:35

mkaminsky

353
2
10

Why 30? Why did you assign 30 instead of getWidth? – Lajos Arpad Jan 11 '14 at 02:48
It's just an example. Anything can be used. I suppose that `getwidth` would be better... – mkaminsky Jan 11 '14 at 16:12
Especially taking into account that you have calculated it. Also, you can do it with a one-liner: $("#div").height($("#div1").width()); – Lajos Arpad Jan 11 '14 at 18:52

Get width of specific div and use as another div's height?

2 Answers2

Linked