Переместить все изображения на сайте на половину их высоты

Question

У нас есть веб-сайт с множеством математических формул (отображается в виде png, преобразованных из латекса), и они динамически загружаются на свои места (из базы данных sql).

Все формулы лежат на одной линии с текстом. Вы знаете в этой строке: _______________.

Нам бы хотелось иметь функцию, которая бы принимала каждый элемент определенного класса (или используя «img» в css), с помощью которого мы могли бы автоматически перемещать все изображения вниз на половину соответствующей высоты изображения.

Есть ли простое решение, которое я упускаю, или нам действительно нужно расположить каждое изображение (к сожалению, их будет сотни!) Вручную?

Answer 1

Чистое решение Javascript:

//All of your images with class : class
var images = document.getElementsByClassName("class");

//Iterates through each of the images
for (var i = images.length - 1; i >= 0; i--)
{
    //Sets the images top margin to the half of the height of the image
    images[i].style.marginTop = images[i].style.height / 2;
}

jQuery Solution:

Если jQuery является опцией, вы можете использовать функцию .each () , чтобы перемещаться по каждому из них при соответствующей высоте:

$('.class').each(function()
{
    //Get Item Height
    var height = $(this).height();

    //Move Item Down By Half of Height
    $(this).css('margin-top',height/2);
});

Более кратко:

$('.class').each(function(){
    $(this).css('margin-top',($(this).height()/2));
});

Answer 2

Что сказал Рионмонстер, кроме того, что я добавил бы это, чтобы получить высоту (или любое измерение) изображения, которое я всегда должен был сказать:

theHeight = parseFloat( element.style.height );

parseFLoat (), поскольку он будет обрабатывать все, что может обработать parseInt (), тогда как обратное неверно.