在Opera中計算像素的寬度

如何獲取Opera中元素的計算寬度？在其他瀏覽器中，我可以這樣做：在Opera中計算像素的寬度

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

...但這只是對Opera的一些作品。它返回「自動」的很多東西，而不是一個有用的像素值。

這裏是一個live demo，它擴大了一些文本以適應一個盒子。它在Opera上不起作用，因爲在其他瀏覽器中計算的寬度是auto而不是px值。

live demo in different browsers

我怎樣才能得到更多有用的計算方式，如元素的像素寬度，在Opera？

我意識到，在這種情況下，我可以使用offsetWidth而不是獲得計算樣式。我很欣賞這個建議，但這個問題的真正意義在於，我想知道如何在Opera中獲得計算樣式，其中樣式實際上是以單位計算的。 對於這個問題我不在乎offsetWidth。

來源

2012-02-07 Dagg Nabbit

瀏覽器？ jQuery使這個例程輕鬆優雅。只需使用'$（glyph）.width（）'insteed'getStyle（glyph，'width'）' http://jsbin.com/ikatuc/2/edit#javascript,html,live 測試Opera 10.63，IE6 -8，Chrome，Firefox – 2012-02-17 07:01:45

它也不能在IE < = 8

的原因是因爲currentStyle和getComputedStyle在這種情況下工作不同。如果您首先測試了getComputedStyle，則在Opera和IE 9-10中都會使用work。 Opera在很多情況下都試圖模仿IE（請參閱innerText vs textContent），所以它也有currentStyle。

但是請注意，如果相關元素的風格（FF，Chrome，IE）爲display:inline，您將失去「預期」行爲，因爲他們會爲您報告「自動」...除了...您在Opera中猜到了，它會告訴你元素的「正確」寬度。

如果你想有一個一般用的功能，你最好包括一般用途庫（正如你會發現充滿了邊緣的情況下，你不需要）。如果你有一個具體的目的解決你可以使用兼容替換。

在這種情況下，計算樣式對你來說並不是很有用。根據您的需要，您需要的可能是clientWidth，offsetWidth或scrollWidth。它們主要區別在於是否要包含填充，border，margin和/或剪切區域（在水平溢出內容的情況下）。

甚至在IE 6等古老瀏覽器中也支持它們，事實上，這些屬性在第一次瀏覽器戰爭中首次由MS引入（就像innerHTML）。

您可以通過使用MSDN或MDN搜索瞭解更多關於它們的信息。

來源

2012-02-15 15:42:50 galambalazs

除了Opera以外，其他所有瀏覽器中的計算風格對我都很有用。這個問題是關於如何在Opera中獲得有用的計算風格，而不是如何用clientWidth解決它。如果我將示例更改爲字體顏色或其他內容，會有幫助嗎？ – 2012-02-15 20:35:52

好的，我只是回答了你的問題（根據你的標題和原始描述）。如果你有特定的問題，你爲什麼要問別的東西？我不確定你是否嘗試解決問題或只是想創建一個... – galambalazs 2012-02-15 23:02:22

我有一個具體的問題。我原來的帖子以「我怎樣才能在Opera中獲得更有用的計算樣式，如元素的像素寬度？」這是我的問題的總結。什麼也沒有變。我想獲得計算樣式，而不是offsetWidth。 – 2012-02-16 02:54:46

什麼CSS稱爲「計算值」並不總是你所期望的。我想Opera在這裏遵循規範，而其他瀏覽器做一些他們認爲更有用的東西。

爲了這個目的，我建議使用element.offsetWidth而不是getComputedStyle()。

來源

2012-02-07 09:19:43 hallvors

嗯，我想使用真正的DOM方法，但是在這裏使用非標準的'offsetWidth'確實更合理。你能否提供一個指向Opera規範的相關部分的鏈接？我很驚訝他們是唯一以這種方式完成的人，如果它真的是特定的行爲。 – 2012-02-07 10:37:30

警告：我不是CSS大師。然而，我的理解是，在「計算」和「實際」值之間，CSS有區別（見http://www.w3.org/TR/CSS2/cascade.html中的定義），其中「計算」可能並不總是一個像素值。現在，可能沒有詳細說明這一點，讓我精確地聲稱Opera做到了「正確」 - 比方說，我們做了我們認爲正確的時候，但其他瀏覽器似乎在執行其他決定..;） – hallvors 2012-02-09 22:26:03

我看到https://developer.mozilla.org/en/CSS/computed_value指出：「getComputedStyle DOM API返回使用的值，而不是計算值。」那麼，這解釋了它:-p – hallvors 2012-02-09 22:28:29

如果保持代碼結構合理，不應該有任何理由，即使經過驗證，也不會將腳本元素作爲子元素放置到body元素，因爲這會導致編碼做法很差。另一方面，我讚揚你使用appendChild而不是不可靠的innerHTML，所以至少你正在努力不採取懶惰的路線。

對onload事件使用匿名函數，以便您可以明顯執行多個函數。我對字形（SVG？）不熟悉，所以我無法使用任何瀏覽器將字形呈現爲7像素以外的任何其他字體。

這裏是返工代碼...

<?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>

來源

2012-02-17 00:01:35 John

jsbin必須將這些腳本元素放在那裏，我只是將它們鍵入腳本面板。「雕文」在這裏沒有多大意義。在我複製粘貼的代碼中更有意義。它基本上意味着「符號」。在這種情況下，符號是字母G. – 2012-02-17 06:03:08

您可以使用此代碼來獲取在Opera屬性：你爲什麼不使用任何框架，在不同的檢測寬度和高度

document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProp);

來源

2012-02-17 15:10:25

在Opera中計算像素的寬度

回答

相關問題