Как изменить верхний край элемента в соответствии с его высотой?

Question

У меня есть простой код, чтобы поднять верхний край всплывающей подсказки по высоте.

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

Я использую JQuery 1.9.1 с UI 1.9.2, и я не знаю, почему это не работает.

подсказке элемент, MarginTop должен быть установлен в - + 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() получает номер, он будет автоматически конвертировать в строку с 'рх'. Если он получает строку, он предполагает, что значение завершено и должно быть установлено как есть.

Следующая работала бы, а также:

// 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" является недопустимым значением CSS для MarginTop:

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

Форма строки полезна, если вы хотите для установки значения с использованием процентных значений или их значений:

$("#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' });