Извлечь ширину/высоту элемента css3 с масштабированием

Я сражаюсь против странности (я думаю) свойства offsetWidth.
это сценарий:Извлечь ширину/высоту элемента css3 с масштабированием

У меня есть, давайте скажем, пядь тег, в моих JS, в определенный момент я выполняю CSS3 преобразования к этому элементу, как:

 el.set('styles', { 
      'transform':'scale('+scale+', '+scale+')',  /* As things would be in a normal world */ 
      '-ms-transform':'scale('+scale+', '+scale+')',  /* IE 9 */ 
      '-moz-transform':'scale('+scale+', '+scale+')',   /* Moz */ 
      '-webkit-transform':'scale('+scale+', '+scale+')', /* Safari/Chrome */ 
      '-o-transform':'scale('+scale+')'  /* Oprah Winfrey */ 
     }); 
     w = el.getWidth(); 
     console.log('after scaling: ' + w);

В этот момент журнал возвращает мне нечеткие значения, как будто он не знает, что сказать.
любое предложение?

источник

2011-04-29 holographix

нечеткие значения? Не могли бы вы объяснить, что еще немного, пожалуйста. –

@Blowski, конечно, m8, если я поставил вышеприведенный код в цикл, который повторяется 100 раз, каждый раз, когда код попадает в console.log, я получаю то же значение (то есть значение «lorem ipsum sit dolor», равное 10 , всегда возвращает свое начальное значение: 272px, поэтому, согласно журналу, масштаб не влияет на размер вообще, даже если фраза на экране получает * огромный *) – holographix

@holographix Можете ли вы опубликовать 'getWidth() 'функция, которую вы используете. И какой браузер (ы) вы проверяете? –

getBoundingClientRect() возвращает правильные значения для меня.

jsFiddle.

источник

2012-06-14 00:00:19 alex

Это потрясающе !!! это определенный правильный ответ. вы король. – vsync

Это работает для меня в Chrome, но из [spec] (http://www.w3.org/TR/css3-transforms/#transform-rendering) не похоже, что это должно: «Примечание: Преобразования делают влияют на визуальную компоновку на холсте, но не влияют на сам макет CSS. Это также означает, что преобразования не влияют на результаты расширений интерфейса Element getClientRects() и getBoundingClientRect(), которые указаны в [CSSOM-VIEW] ». –

@ JakeCobb Это довольно странно, кажется, что ни один продавец не слушал эту спецификацию :) – alex

Преобразования не влияют на внутренние свойства CSS, поэтому вы видите правильное поведение. Вам нужно посмотреть на Матрицу текущей трансформации - как возвращенную из getComputedStyle(). WebkitTransform, чтобы выяснить, насколько значительная часть была масштабирована.

Update: В Firefox 12 и более поздних версий и Chrome/Safari - Алекс говорит ниже, вы можете использовать getBoundingClientRect(), чтобы принимать во внимание любые преобразования, применяемые к элементу

Шкала перехода начинается с 50%/50 %, потому что это по умолчанию & правильное поведение. Если вы хотите, чтобы он начинался с начала, вам нужно установить transform-origin: 0% 0%;

источник

2011-04-29 17:58:17

Я пробовал с window.getComputedStyle (el) .getWidth(), но он все равно дал мне тот же результат, вы думаете, что мне нужно получить другие параметры? – holographix

ok, я извлек матрицу преобразования, но единственное, что мне говорит, это то, что я уже знаю: 'matrix (1.18577, 0, 0, 1.18577, 0px, 0px)' эти данные бесполезны для меня, потому что я уже знаю, какое масштабное отношение I применяется к элементу; Мне нужен новый размер моего масштабированного объекта. – holographix

Если вам просто нужно знать координаты ('offsetLeft',' offsetTop'), то установка начала преобразования в верхний левый угол ('0% 0%') отлично работает – aross

Я использую этот тег span display:block? преобразования должны работать только для элементов блока. Когда я Гото консоли и нагрузки JQuery (просто для удобства) и сделать это:

$('span#foo').css({"-webkit-transform": "scale(2.0, 2.0)"})

ничего не происходит. Но если я делаю это:

$('span#foo').css('display','block').css({"-webkit-transform": "scale(2.0, 2.0)"})

вдруг меняется, и offsetHeight увеличивается. Разочарочно, смещение высоты составляет от 16 до 19, а не до 32 (хотя визуальный внешний вид вдвое больше, а может быть, и точный), но, по крайней мере, он работает как рекламируемый.

источник

2011-05-03 18:50:13

Да, преобразования не поддерживаются встроенными отображаемыми элементами в webkit - хотя спецификация явно заявляет, что они должны быть. –

это круто, «хотя я просто прочитал на днях, как преобразования должны влиять только на элементы блока: P, по-видимому, является последним изменением, по крайней мере. в любом случае, точка остается: transforms do effect свойства HTMLElement, явно offsetHeight и offsetWidth –

-1

getBoundingClientRect() не работает для меня (в Chrome 49).

Этот ответ привел меня к другому решению моей проблемы: https://stackoverflow.com/a/7894886/1699320

function getStyleProp(elem, prop){ 
    if(window.getComputedStyle) 
     return window.getComputedStyle(elem, null).getPropertyValue(prop); 
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE 
} 
getStyleProp(element, 'zoom') //gives zoom factor to use in calculations

источник

2016-05-15 04:55:15 ricka

Извлечь ширину/высоту элемента css3 с масштабированием

ответ

Смежные вопросы