Получение размера преобразованного элемента CSS3 - PullRequest
Новая
       21

Получение размера преобразованного элемента CSS3

10 голосов
/ 16 января 2012

Я бы хотел получить размер div, к которому я применил CSS3-преобразование. 

-webkit-transform: scale3d(0.3, 0.3, 1);

Итак, фактически, я сделал элемент 30% от его первоначального размера.Однако, когда я запрашиваю ширину / высоту элементов, он сообщает о размере элемента до применения преобразования.

Я понимаю, что это на самом деле правильное поведение и что элемент на самом деле не меняет размер, но егосодержание делает.Но, и причина, по которой я спрашиваю здесь, если я сделаю щелчок правой кнопкой мыши на элементе и выберу «осмотреть элемент» во всплывающем меню (я сейчас использую Safari на Mac), элемент будет выделен иотображаемый размер представлен во всплывающей подсказке браузера, прикрепленной к элементу.

Итак, это говорит о том, что браузер «знает» отображаемый размер, но я пока не нашел способа доступа к этой информации.Кто-нибудь может мне помочь?

Ответы [ 2 ]

8 голосов
/ 06 июня 2012

Вы можете использовать метод getBoundingClientRect() для элементов, чтобы получить размеры. Он учитывает матрицу преобразований (поэтому вам не нужно выполнять какие-либо математические операции самостоятельно). 

var elementDimensions = element.getBoundingClientRect();

jsFiddle .

7 голосов
/ 16 января 2012

Ого, это было сложнее, чем я ожидал.Я так же удивлен, как и вы, что нет простого пути.

Вот подтверждение концепции.

Вот JS: 

$('div').each(function() {
    var matrix = window.getComputedStyle(this).webkitTransform,
        data;
    if (matrix != 'none') {
        data = matrix.split('(')[1].split(')')[0].split(',');
    } else {
        data = [1,null,null,1];
    }
    $(this).text($(this).width() * data[0] + 'x' + $(this).height() * data[3]);
});

Ключом является функция getComputedStyle(), которая неприятно возвращает матрицу в виде строки, которую необходимо проанализировать в массив, прежде чем она будет полезна.Однако в нем содержатся коэффициенты преобразования, которые можно умножить на размеры CSS, чтобы получить размер.

Ссылка: Трюки CSS

...