獲取元素的內容寬度

offsetWidth對我來說不夠好，因爲這包括填充和邊框寬度。我想找出元素的內容寬度。是否有一個屬性，或者我必須採取offsetWidth，然後從計算的樣式中減去填充和邊框寬度？獲取元素的內容寬度

來源

2013-07-03 Niet the Dark Absol

沒有jQuery，但即使使用jQuery，也不會。 –

我建議要麼scrollWidth要麼clientWidth取決於你是否要考慮滾動條。

退房Determining the dimensions of elements或specification itself。

來源

2013-07-03 00:56:06 martineno

對不起，這兩個似乎都給與'offsetWidth'相同。 –

那些包括填充。 –

這聽起來對我來說就像你想在元素上使用getComputedStyle。你可以看到getComputedStyle與offsetWidth這裏的一個例子：http://jsbin.com/avedut/2/edit

或者：

window.getComputedStyle(document.getElementById('your-element')).width;

來源

2013-07-03 00:59:33 founddrama

當然，如果我設置'box-sizing：border-box'，這當然會失敗;） –

哦，還有另外一件事，我特意在我的問題中給出了這個選項。我正在尋找另一個。 –

這從一開始就是重要的一點。 ;在這種情況下，是的：我認爲你需要做一些減法。我爲jsbin添加了一個'getWidth'：http://jsbin.com/avedut/6/edit（以及它在那裏措辭的方式讓我有點絆倒了，抱歉） – founddrama

由於這個谷歌搜索，但沒有一個合適的答案然而，當第一次出現，這是一個：

function getContentWidth (element) { 
    var styles = getComputedStyle(element) 

    return element.clientWidth 
    - parseFloat(styles.paddingLeft) 
    - parseFloat(styles.paddingRight) 
}

基本上，我們首先得到元素的寬度，包括填充（clientWidth），然後減去填充左側和右側。我們需要parseFloat這些填充，因爲它們是px - 帶有字符的字符串。

我在jsFiddle上爲此創建了一個小操場，請查看！

來源

2017-11-10 13:42:42 Loilo

獲取元素的內容寬度

回答

相關問題