javascript - 使用 jQuery 向 vh 中的元素左属性集添加/减去固定值

Question

我有以下代码:

HTML:

<div id="my-div"></div>

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 = $('<div />').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。

首先，函数似乎有问题。对于某些值它可以工作，对于某些值它不会返回正确的值。

Example with 150vh , 工作正常。

Example with 140vh ，无法正常工作。

基本上我需要的是能够加减12关闭当前 vh left 的值#my-div的属性(property)单击一个元素。

Answer 1

稍微更改插件以使用 getComputedStyle，但请注意，您必须为 IE8 及以下版本填充它，但它会比 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;
};

只为获得你能做的值(value)

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

FIDDLE