Agregue / reste el valor fijo a la propiedad de elementos dejados en vh con jQuery

Tengo el siguiente código:

HTML:

CSS:

 #my-div{ display: none; position: absolute; left: 150vh; bottom: -150px; } 

jQuery:

 $.fn.vhLeft = function(property,unit){ var wpx = this.css(property).replace(/[^0-9]+/g,""); var temp = $('
').css({ left:'1'+unit, position: 'absolute' }); $('body').append(temp); var oneEm = temp.css(property).replace(/[^0-9]+/g,""); temp.remove(); var value = wpx/oneEm; return (Math.round(value*100))+unit; }; // You could now get your value like alert($('#my-div').parseInt(vhLeft)('left','vh'));

Con créditos para @Zword.

En primer lugar parece que hay algo mal con la función. Con algunos valores funciona, con algunos valores no devuelve el valor correcto.

Ejemplo con 150vh , funcionando correctamente.

Ejemplo con 140vh , no funciona correctamente.

Básicamente, lo que necesito es poder sumr o restar 12 al valor vh actual de la propiedad left de #my-div al hacer clic en un elemento.

Cambie un poco el complemento para usar getComputedStyle , pero tenga en cuenta que tendrá que getComputedStyle eso para IE8 o inferior, pero hará un mejor trabajo para devolver los estilos correctos de lo que parece hacer jQuery aquí.

Además, para agregar un definidor, simplemente agregue otro argumento y una condición

 $.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; }; 

Solo para obtener el valor que puedes hacer.

 var vh = $('#my-div').vhLeft('left','vh'); 

y para agregar / restar al valor (esto también devuelve el nuevo valor)

 $('#my-div').vhLeft('left','vh', 12); // adds 12, returns 162 $('#my-div').vhLeft('left','vh', -12); // subtracts 12, returns 138 

VIOLÍN