JSFiddle - React, Tailwind, and code Playground
HTML
<div id="my-div">test</div>
CSS
#my-div{
display: none;
position: absolute;
left: 150vh;
top: 0;
}
JavaScript
$.fn.vhLeft = function(property , unit, adder){
var el1 = this.get(0), el2 = document.createElement('div');
$('body').append(el2);
el2.style[property] = 1 + unit;
var px1 = parseFloat(window.getComputedStyle(el1).getPropertyValue(property).replace(/[^0-9\,\.\-]/g, '')),
px2 = parseFloat(window.getComputedStyle(el2).getPropertyValue(property).replace(/[^0-9\,\.\-]/g, '')),
tot = Math.round( px1 / px2 );
if (adder) {
tot = tot + (adder);
el1.style[property] = tot + unit;
}
$(el2).remove();
return tot;
};
var vh = $('#my-div').vhLeft('left','vh');
console.log('Initial value : ' + vh);
var vh2 = $('#my-div').vhLeft('left','vh', 12);
console.log('new value : ' + vh2);