0

我有以下代码：

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。

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

以 150vh 为例，工作正常。

以 140vh 为例，无法正常工作。

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

4

1 回答 1

4

稍微更改一下插件以使用getComputedStyle，但请注意，对于 IE8 及更低版本，您必须对其进行 polyfill，但它在返回正确样式方面会做得比 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

小提琴

于 2014-03-04T11:29:04.330 回答