Chiều rộng của phần tử kế toán chế độ quirks trong javascript?

Tôi đã quét qua tất cả các thư viện js phổ biến, nhưng tôi không thể tìm thấy một thư viện có chức năng chiều rộng cho phần tử DOM thực sự giải thích chế độ quirks trong Internet Explorer. Vấn đề là đệm và đường viền không được tính trong chiều rộng khi chế độ quirks được tương tác. Theo tôi có thể nói điều này xảy ra khi loại tài liệu bị loại bỏ hoặc doctype được đặt thành html 3.2.Chiều rộng của phần tử kế toán chế độ quirks trong javascript?

Rõ ràng là tôi chỉ có thể đặt loại tài liệu thành tiêu chuẩn tương thích, nhưng tập lệnh này có thể được nhúng ở bất kỳ đâu nên tôi không có quyền kiểm soát đối với tài liệu.

Để chia nhỏ sự cố thành các phần nhỏ hơn:

1) Làm thế nào để bạn phát hiện chế độ quirks? 2) Cách tốt nhất để trích xuất đường viền và phần đệm từ một phần tử để bù lại là gì?

Ví dụ với nguyên mẫu:

<html> 
<head> 
</head> 
<body> 

<div id="mydiv" style="width: 250px; pading-left: 1px; border: 2px black solid">hello</div> 

<script> 
    alert($('mydiv').getWidth()) 
</script> 

</body> 
</html>

kết quả:

253 (ff) 250 (ví dụ)

Cảm ơn trước!

Nguồn

2008-10-21 christoff

@ 1

document.compatMode

"CSS1Compat" có nghĩa là "tiêu chuẩn chế độ" và "BackCompat" có nghĩa là "quirks mode".

@ 2

offset Thuộc tính của phần tử HTML cho chiều rộng trên màn hình tính bằng pixel.

<div id="mydiv" style="width: 250px; padding-left: 1px; border: 2px black solid">hello</div> 

document.getElementById('mydiv').offsetWidth 
//255 (standards) 250 (quirks)

Một chức năng này bù đắp cho chiều rộng cho IE quirksmode có để kiểm tra chế độ dựng hình sau đó thêm đường viền và đệm để chiều rộng;

function compensateWidth(el, targetWidth){ 

    var removeUnit = function(str){ 
     if(str.indexOf('px')){ 
      return str.replace('px','') * 1; 
     } 
     else { //because won't work for other units... one may wish to implement 
      return 0; 
     } 
    } 
    if(document.compatMode && document.compatMode=="BackCompat"){ 
     if(targetWidth && el.offsetWidth < targetWidth){ 
      el.style.width = targetWidth; 
     } 
     else if (el.currentStyle){ 
      var borders = removeUnit(el.currentStyle['borderLeftWidth']) + removeUnit(el.currentStyle['borderRightWidth']); 
      var paddings = removeUnit(el.currentStyle['paddingLeft']) + removeUnit(el.currentStyle['paddingRight']); 
      el.style.width = el.offsetWidth + borders + paddings +'px'; 
     } 
    } 

}

Bây giờ có hai cách để sử dụng nó:

var div = document.getElementById('mydiv') 
// will try to calculate target width, but won't be able to work with units other than px 
compensateWidth(div); 

//if you know what the width should be in standards mode 
compensateWidth(div, 254);

Nguồn

2008-10-21 13:34:45 pawel

nơi nào thuộc tính currentStyle đến từ đâu? Tôi đang thử nó trong ff và nó có vẻ là undefined – christoff

currentStyle là phiên bản của IE getComputedStyle(). Nó trả về giá trị thực tế của thuộc tính CSS đã cho. Bạn có thể đọc thêm trong bài viết của PPK: http://www.quirksmode.org/dom/getstyles.html – pawel

Với Prototype, bạn cũng có thể sử dụng Element.getStyle(). –

Thư viện có thể nói đúng sự thật. Vấn đề không phải là các bài đọc được kết hợp nhưng màn hình hiển thị acutal được kết hợp. Ví dụ: hãy thử:

<div id="mydiv" style="width: 100px; border-left: 100px black solid;">&nbsp;</div>

sau đó thử thay đổi văn bản bên trong div để xem điều gì đang xảy ra. IE sẽ hiển thị các giá trị khác nhau tùy thuộc vào văn bản bên trong trong khi FF sẽ hiển thị chính xác. IE đang cố gắng lấp đầy 100px + thứ gì đó vào không gian 100px với nhiều kết quả khác nhau.

jQuery có hai phương thức cho chiều rộng: .width và .outerWidth. .outerWidth sẽ trả về toàn bộ chiều rộng của phần tử. Nó cũng có possiblity để có được tất cả các tài sản khác (đệm, vv biên giới) như trong ví dụ dưới đây:

$(document).ready(function() { 
    alert("width=" + $('#mydiv').width() 
    + " outerWidth=" + $('#mydiv').outerWidth() 
    + " borderLeftWidth=" + $('#mydiv').css("borderLeftWidth")) 
});

Nguồn

2008-10-21 10:31:22 Aleris

javascript:(function(){ 
    var mode=document.compatmode,m;if(mode){ 
     if(mode=='BackCompat')m='quirks'; 
     else if(mode=='CSS1Compat')m='Standard'; 
     else m='Almost Standard'; 
     alert('The page is rendering in '+m+' mode.'); 
    } 
})();

mã mà sẽ phát hiện các chế độ cho bạn.

IE cũng sẽ chuyển sang chế độ quirks nếu ANYTHING nhưng doctype ở trên dòng đầu tiên. Ngay cả một dòng đầu tiên trống với doctype trên dòng thứ hai sẽ gây ra chế độ quirks.

Nguồn

2008-10-21 12:49:17

Chiều rộng của phần tử kế toán chế độ quirks trong javascript?

Trả lời

Các vấn đề liên quan