使用jQuery向vh中设置的元素left属性添加/减去固定值

我有以下代码：

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')); 

获得@Zword的学分。

首先，它看起来function有问题。 有些值可以使用，有些值不会返回正确的值。

150vh示例 ，工作正确。

140vh示例 ，无法正常工作。

基本上我需要的是能够在点击一个元素时为#my-div的left属性添加或减去12当前vh值。

Answer 1

稍微更改插件以使用getComputedStyle ，但请注意，您必须为IE8及以下版本getComputedStyle ，但它会比jQuery更好地返回正确的样式。

另外，要添加setter，只需添加另一个参数和条件

 $.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'); 

并添加/减去该值（这也返回新值）

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

小提琴