получить вычисленную ширину в пикселях в Opera - PullRequest
Новая
       2

получить вычисленную ширину в пикселях в Opera

6 голосов
/ 07 февраля 2012

Как я могу получить вычисленную ширину элемента в Opera? В других браузерах я могу сделать это: 

// getComputedStyle wrapper
function getStyle(element, styleProp) {
  return element.currentStyle ? element.currentStyle[styleProp] :
      getComputedStyle(element, null).getPropertyValue(styleProp);
}

... но это только вид работ в Opera. Он возвращает «авто» для многих вещей вместо полезного значения пикселя.

Вот демоверсия live , которая расширяет некоторый текст, чтобы поместиться в поле. Он не работает в Opera, потому что вычисленная ширина равна auto вместо значения px, как в других браузерах.

live demo in different browsers

Как я могу получить более полезные вычисляемые стили, такие как ширина элемента в пикселях, в Opera?

Я понимаю, что в этом случае я могу использовать offsetWidth вместо получения вычисляемого стиля. Я ценю совет, но реальный смысл этого вопроса заключается в том, что я хочу знать, как получить вычисляемые стили в Opera, где стиль фактически вычисляется в единицах. Меня не волнует offsetWidth для целей этого вопроса.

Ответы [ 4 ]

5 голосов
/ 07 февраля 2012

То, что CSS называет «вычисленным значением», не всегда то, что вы ожидаете. Я предполагаю, что Opera следует спецификации T здесь, в то время как другие браузеры делают то, что считают более полезным.

Я бы предложил использовать element.offsetWidth вместо getComputedStyle() для этой цели.

2 голосов
/ 15 февраля 2012

Он также не работает в IE <= 8 </p>

Причина в том, что currentStyle и getComputedStyle работают по-разному в этом случае.Если бы вы сначала тестировали getComputedStyle, то сработало бы как в Opera, так и в IE 9-10.Opera во многих случаях пытается имитировать IE (см. innerText vs textContent), поэтому она тоже имеет currentStyle.

НО, пожалуйста, обратите внимание, что вы потеряете свое "ожидаемое" поведение, еслирассматриваемый элемент имеет display:inline в своем стиле (FF, Chrome, IE), потому что они сообщат вам «авто» ... кроме ... как вы уже догадались, в Opera, который затем покажетВы "правильная" px ширина элемента.

Если вам нужна целевая функция general , вам лучше включить целевую библиотеку general (которая, как вынайдут заполнены крайние случаи, которые вам никогда не понадобятся).Если у вас есть специфическая цель, которую нужно решить, вы можете использовать совместимую замену.

Вычисленный стиль не очень полезен для вас в этом случае.Что вам нужно, это, вероятно, clientWidth, offsetWidth или scrollWidth в зависимости от ваших потребностей.Они отличаются главным образом тем, хотите ли вы добавить отступы, border, margin и / или обрезанные области (в случае горизонтального переполнения контента).

Они поддерживаются даже в старых браузерах, таких как IE 6, вФактически эти свойства были впервые введены MS еще во время первой войны браузеров (точно так же, как innerHTML).

Вы можете узнать больше о них, прибегая к помощи MSDN или MDN.

0 голосов
/ 17 февраля 2012

Вы можете использовать этот код для получения собственности в Opera: 

document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProp);
0 голосов
/ 17 февраля 2012

Не должно быть никаких причин, по которым это должно быть сложно, если вы сохраняете свой код хорошо структурированным, никогда не помещайте элементы скрипта как дочерние элементы в элемент body, даже если он проверяется, так как это приведет к очень плохой практике кодирования.С другой стороны, я рекомендую вам использовать appendChild вместо ненадежного innerHTML, поэтому, по крайней мере, вы стараетесь не идти по ленивому маршруту.

Используйте анонимную функцию для события onload, чтобы вы могли выполнить большечем одна функция, очевидно.Я не знаком с глифами (SVG?), Поэтому я не смог заставить ни один браузер отображать глиф на чем-то кроме 7px.

Вот переработанный код ... 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>get computed width in pixels in Opera</title>
<script type="application/javascript">
//<![CDATA[

// getComputedStyle wrapper
function getStyle(element, styleProp)
{
 return element.currentStyle ? element.currentStyle[styleProp] : getComputedStyle(element, null).getPropertyValue(styleProp);
}

// cheesy convenience function
function textDiv(textContent, className)
{
 var tmp = document.createElement('div');
 if (className) tmp.className = className;
 tmp.appendChild(document.createTextNode(textContent));
 return tmp;
}

window.onload = function()
{
 var box = document.getElementById('box'),glyph = box.appendChild(textDiv('g', 'glyph')),size=500;

 glyph.style.position = 'absolute';
/*
 document.getElementById('status').appendChild(textDiv('Initial computed width: ' + getStyle(glyph, 'width')));

 while (parseInt(getStyle(glyph, 'width'), 10) <  100)
 {
  glyph.style.fontSize = size++ + '%';
 }
*/
 document.getElementById('status').appendChild(document.createTextNode(document.getElementById('box').firstChild.scrollWidth+'px'));
}

//]]>
</script>
</head>

<body>

<div id="status"></div>
<div id="box"></div>

</body>
</html>
...