如何根据元素的高度改变元素的顶部边距？

Question

我这里有一个简单的代码，用来将工具提示的顶部边沿提高到它的高度。

$("#tooltip").css({'marginTop':'-' + $("#tooltip").height});

我在UI1.9.2中使用jQuery 1.9.1，并且不确定为什么这不起作用。

工具提示是元素，边沿应该设置为- + tooltip.height

示例

tooltip.height = 50px, margin-top:-50px;

有人能指出我的错误吗？

谢谢

Answer 1

尝试以下几点：

$("#tooltip").css("margin-top", function() { 
    return -1 * $(this).outerHeight() // <== Multiplies outerHeight() by -1 and returns the result
});

在这种情况下，如果$.css()收到一个数字，它将自动转换为带有'px‘的字符串。如果它接收到一个字符串，它假定值是完整的，应该按原样设置。

以下几点也是可行的：

// Passing in a number
$("#tooltip").css({'marginTop':  - $("#tooltip").outerHeight()});
$("#tooltip").css({'marginTop':  -1 * $("#tooltip").outerHeight()});
$("#tooltip").css('marginTop',  - $("#tooltip").outerHeight());
$("#tooltip").css('marginTop',  -1 * $("#tooltip").outerHeight());

// Passing in a string with units specified
$("#tooltip").css({'marginTop':  '-' + $("#tooltip").outerHeight() + 'px'});
$("#tooltip").css('marginTop',  '-' + $("#tooltip").outerHeight() + 'px');

虽然这失败了，因为生成的字符串"-20"是marginTop的无效css值：

$("#tooltip").css({'marginTop':  '-' + $("#tooltip").outerHeight()});

如果要使用百分比或em的值设置值，则字符串窗体非常有用：

$("#tooltip").css({'marginTop':  "2em"});
$("#tooltip").css({'marginTop':  "10%"});

Answer 2

$("#tooltip").css("margin-top", function() { return $(this).outerHeight() });

Answer 3

$("#tooltip").css({ marginTop: - $("#tooltip").outerHeight() + 'px' });