使用JavaScript閱讀div的寬度

我試圖讀取沒有jQuery的div的寬度。我正在使用的代碼是：使用JavaScript閱讀div的寬度

JS：

var windowwidth = parseInt(document.getElementById("window").style.width); 
window.onload = function start() { 
    alert(windowwidth); 
}

HTML：

<div id="window"> 
    <p>Lorem ipsum dolor sit amet.</p> 
</div>

CSS：

#window { 
    height: 250px; 
    margin: 0 auto; 
    width: 600px; 
}

我不明白爲什麼這是不工作，我已經遍佈這個網站和谷歌，並不能找出解決方案。我不想爲此使用jQuery（這是一個小的自定義HTML5腳本，所以我不需要那個龐大的庫來處理一件小事），甚至當我嘗試jQuery方法時，它仍然不起作用。

來源

2011-06-25 JacobTheDev

爲什麼不看看jQuery源代碼，看看他們是怎麼做到的？ –

如果我不能以另一種方式解決問題，這可能是一個好主意，謝謝。 – JacobTheDev

use element.clientWidth :) – Achshar

在DOM準備好之前，你不能保證document.getElementById()能夠工作（即將返回所需的元素）。因此，嘗試：

window.onload = function() { // removed the name to avoid some IE leaks 
    var windowwidth = parseInt(document.getElementById("window").style.width); 
    alert(windowwidth); 
}

來源

2011-06-25 19:52:10 davin

至少給我彈出，但它給了我一個NaN值。任何想法爲什麼？如果我將inline設置爲寬度，它會起作用，但是我最終希望不僅僅是爲了使用而釋放它，對於不閱讀說明的人可能會有些困惑。 – JacobTheDev

@Rev，我真的建議你包含jQuery（或者更輕的微型框架），即使它只是爲了這個小東西。有機會，你會在其他地方使用它，但即使沒有，它是一個小的代價，不必自己實現這個測試，並不斷支持新的瀏覽器等。就像你說的，'.style.width' isn'最好的解決方案，所以你開始使用'.offsetWidth'這是不標準的，意大利麪開始... – davin

儘管你可以嘗試使用'document.getElementById（「window」）。offsetWidth'，不知道它是如何工作的與滾動和其他類似的東西（圖書館會照顧），就像我說的，這不是標準的（儘管AFAIK廣泛支持） – davin

我會用jQuery來做這樣的事情。你可以在這裏找到你想要的東西：http://api.jquery.com/width/

來源

2011-06-25 19:52:09 ju5tu5

如果你想看到的jQuery是怎麼做的，這裏是鏈接到源：https://github.com/jquery/jquery/blob/master/src/dimensions.js

來源

2011-06-25 20:09:18

不看樣式屬性，讀取元素的實際寬度：

window.onload = function(){ 
    alert(document.getElementById('window').offsetWidth); 
}

offsetWidth是什麼瀏覽器說是寬度，可以比你使用CSS如果，例如，內容延伸其更廣泛的將其設置爲的不同。

來源

2011-06-25 20:10:06

只有在繪製元素後才能獲取style.width。嘗試將您的代碼設置爲setTimeout（）。有時它可以幫助我

window.onload = function(){ 
    setTimeout(
     function(){ alert(document.getElementById('window').style.width); }, 
     200 
    ); 
}

來源

2011-06-25 20:16:45 redexp

使用JavaScript閱讀div的寬度

回答

相關問題