Aggiungi / sottrai valore fisso agli elementi left set di proprietà in vh con jQuery

Ho il codice seguente:

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 crediti per @Zword.

    Prima di tutto sembra che ci sia qualcosa di sbagliato nella funzione. Con alcuni valori funziona, con alcuni valori non restituisce il giusto valore.

    Esempio con 150vh , funzionante correttamente.

    Esempio con 140vh , non funziona correttamente.

    Fondamentalmente ciò di cui ho bisogno è di poter aggiungere o sottrarre 12 a / off il valore corrente vh per la proprietà left di #my-div al clic di un elemento.

    Cambia il plugin un po ‘per usare getComputedStyle , ma getComputedStyle presente che dovrai eseguire il polyfill per IE8 e getComputedStyle , ma farà un lavoro migliore per restituire gli stili corretti di quanto jQuery sembra fare qui.

    Inoltre, per aggiungere un setter, basta aggiungere un altro argomento e una condizione

     $.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 per ottenere il valore che puoi fare

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

    e per aggiungere / sottrarre al valore (questo restituisce anche il nuovo valore)

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

    VIOLINO