jQuery: thực tế div chiều rộng

Question

Tôi có hai <div>, một lồng vào khác được định nghĩa như thế này:

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

Các css:

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

Hiệu quả là những gì tôi muốn, nội dung đưa ra theo chiều ngang bên trong nhưng bị ẩn khi nó vượt quá, (sau đó cuộn nó bằng jQuery).

Vì tôi không biết nội dung của .content (và cũng không nó có thể dự đoán), tôi cần phải biết thực chiều rộng của nó (được xác định bởi các nội dung), nhưng cả hai .width() và .innerWidth() cho tôi cùng một kết quả mà là 660 khi lần đầu tiên được gọi (như chứa div) và 660 + x khi tôi gọi nó sau khi đã cuộn nó bằng cách đặt lề trái-trái (x là bộ dịch trái với lề).

Cách lấy chiều rộng phụ thuộc vào nội dung của phần tử? Cảm ơn

Answer 1

Phân chia theo mặc định mất toàn bộ chiều rộng trong bố mẹ, do đó chiều rộng sẽ luôn là chiều rộng của bố mẹ.

Nếu bạn không muốn điều đó, bạn sẽ sử dụng

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

hoặc có thể

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

như để biến các yếu tố #div.content thành một inline hoặc phao yếu tố tương ứng, mà chỉ chiếm như nhiều không gian như nó cần (tức là không nhất thiết phải tất cả các không gian mà cha mẹ cung cấp). Vì vậy, nên làm việc!

Answer 2

Bạn đã thử element.offsetWidth chưa?

Answer 3

Tôi không chắc chắn lý do bạn sử dụng #div.* vì điều đó có nghĩa là bạn có một phần tử có id div. Nếu bạn định chỉ định div với một lớp nhất định, hãy sử dụng div.class-name. Vì một div nằm trong một child bên trong div khác, nó có chiều rộng của cha mẹ. Đặt phao sang trái cho phép nó mở rộng ra ngoài giới hạn này.

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

cuộn dụ: http://jsfiddle.net/9E8G7/6/

Dưới đây là một ví dụ nhanh jQuery tôi đã viết, có thể được cải thiện Tôi chắc chắn. Nó cuộn cho đến khi nó đến cuối nội dung.

$(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(); 
}); 

Answer 4

Bạn đã thử: jQuery.outerWidth(), tôi có nghĩa là $(yourelement).outerWidth()?