jQuery的：實際的div寬度

我有兩個<div>，一個嵌套到這樣定義的其它：jQuery的：實際的div寬度

<div class="wrapper"> 
    <div class="content"> 
     [..] Content [..] 
    </div> 
</div>

的CSS：

#div.wrapper 
{    
    width: 660px; 
    overflow: hidden; 
    float: left; 
} 
#div.content 
{ 
    white-space: nowrap; 
}

的效果是我想要的，內容規定了水平在內部但超過時隱藏（我然後用jQuery滾動它）。

因爲我不知道.content內容（也不是可預測的），我需要知道真正寬度它（由內容所定義的），但兩者.width()和.innerWidth()給我同樣的結果在第一次調用時（如容器 div），當我通過設置負邊距左移（x是具有邊距的左移位集）後調用它時爲660 + x時爲660。

如何獲取元素的真實的，內容相關的寬度？謝謝

來源

2012-02-09 pistacchio

Div在默認情況下在其父文件中獲取全寬，因此寬度將始終爲父文件的寬度。

如果你不想這樣，你會使用

#div.content 
{ 
    white-space: nowrap; 
    display: inline-block; 
}

或可能

#div.content 
{ 
    white-space: nowrap; 
    float: left; 
}

爲打開#div.content元素爲內嵌或分別浮動元素，只佔用爲它需要很多空間（即不一定是父母提供的所有空間）。所以這應該工作！

來源

2012-02-09 09:54:47

你試過element.offsetWidth？

來源

2012-02-09 09:54:42

我不確定你爲什麼使用#div.*，因爲那意味着你有一個ID爲div的元素。如果您的意思是指定一個具有某個類的div，請使用div.class-name。由於div在另一個div中作爲一個孩子駐留，因此需要其父寬度。將浮動值設置爲「左」可以使其超出此限制。

div.wrapper { 
    width: 660px; 
    overflow: hidden; 
    float: left; 
} 
div.content { 
    white-space: nowrap; 
    float: left; 
}

滾動例如：http://jsfiddle.net/9E8G7/6/

下面是一個簡單的jQuery的例子，我寫的，可以提高我敢肯定。它滾動，直到它到達內容的結尾。

$(document).ready(function(){ 
    var content = $('.content'); 
    var margin = 0; 
    var scrollFunc = function() { 
     margin--; 
     content.css('margin-left', margin); 
     var diff = content.width() - $('.wrapper').width(); 
     if (margin > -diff) { 
      var scroll = setTimeout(scrollFunc, 10); 
     } 
    }; 
    scrollFunc(); 
});

來源

2012-02-09 10:03:07

不錯的額外JQuery代碼。儘管OP沒有提出要求，但我早些時候回答了關於真實寬度的問題，但仍然是一個好消息。 – 2012-02-09 10:49:35

我已經有了坐在那裏的html，所以我無法抗拒：P – 2012-02-09 10:52:08

希望它有助於一些:) – 2012-02-09 13:54:54

你嘗試：jQuery.outerWidth()，我的意思是$(yourelement).outerWidth()？

來源

2012-02-09 10:35:57

jQuery的：實際的div寬度

回答

相關問題