How to get marginTop of an element in 'cm' instead of pixel using jquery/js?

Question

I've a html page for print purpose. My client asked to place an input to adjust vertical alignment of inner content. The content area has a margin top in pixel. But my client asked me to change the top alignment based on the input and input will be in cm with a step changing of 0.1 cm.

I'm not sure what should be the appropriate way of doing it. At first I've to retrieve current margin top but its in pixel.

How can I increase/decrease .1 cm with it ?

See http://stackoverflow.com/questions/10794891/getting-height-of-a-div-in-centimeter-using-jquery. The difference will be that you'll convert the value returned by `marginTop`, not the height of your element. — Antonio Hernández, Oct 06 '16 at 05:03
as I said, the html is for print purpose. Also I've to generate pdf from it.... — Rahman Ashik, Oct 06 '16 at 06:17

score 1 · Accepted Answer · answered Oct 06 '16 at 05:16

1

You cannot increase or decrease in CMs which browser does not support. So you may have to covert the value entered by user to Pixels. Then apply it.

To Calculate Pixel value of CM

1 cm = 37.795276px;

On wise versa

1px = 0.02645833 cm;

answered Oct 06 '16 at 05:16

RaJesh RiJo

4,302
4
25
46

score 1 · Answer 2 · answered Oct 06 '16 at 05:20

1 px = 0.02645833cm

Do the math over the obtained px

$('input').change(function(){
  var val = $(this).val()
  var inCm = 0.02645833 * val
  $('#cm').text(inCm)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Enter px value"/>
<br/>
<div id="cm"></div>

How to get marginTop of an element in 'cm' instead of pixel using jquery/js?

2 Answers2