Szerokość elementu rozliczającego tryb dziwactwa w javascript?

Przeglądałem wszystkie popularne biblioteki js, ale nie mogę znaleźć takiego, który ma funkcję szerokości dla elementu DOM, który faktycznie odpowiada za tryb dziwactwa w Internet Explorerze. Problem polega na tym, że padding i granice nie są liczone na szerokość, gdy włączony jest tryb dziwactwa. O ile wiem, dzieje się tak, gdy typ doctype zostaje pominięty lub doctype jest ustawione na html 3.2.Szerokość elementu rozliczającego tryb dziwactwa w javascript?

Oczywiście mogłem po prostu ustawić doctype na zgodny ze standardami, ale ten skrypt może być osadzony w dowolnym miejscu, więc nie mam kontroli nad doctype.

Aby przełamać ten problem na mniejsze części:

1) W jaki sposób można wykryć Quirks Mode? 2) Jaki jest najlepszy sposób na wyodrębnienie obramowania i wypełnienia z elementu, aby to zrekompensować?

Przykład z prototypu:

<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>

wynik:

253 (ff) 250 (IE)

Z góry dzięki!

Źródło

2008-10-21 christoff

@ 1

document.compatMode

"CSS1Compat" oznacza "trybie standardowym " i "BackCompat" oznacza "tryb quirks".

@ 2

offsetWidth właściwość elementów HTML daje jej szerokość na ekranie w pikselach.

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

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

funkcję, która kompensuje szerokość dla IE Quirks Mode musi sprawdzić dla trybu renderowania następnie dodać granic i dopełnienie do szerokości;

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'; 
     } 
    } 

}

Obecnie istnieją dwa sposoby, aby go używać:

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);

Źródło

2008-10-21 13:34:45 pawel

skąd atrybut currentStyle pochodzi? Próbuję go w ff i wydaje się być niezdefiniowany – christoff

currentStyle jest IE w wersji getComputedStyle(). Zwraca rzeczywistą wartość danej właściwości CSS. Możesz przeczytać więcej w artykule PPK: http://www.quirksmode.org/dom/getstyles.html – pawel

Z prototypem możesz również użyć Element.getStyle(). –

Biblioteka prawdopodobnie mówi prawdę. Problem nie polega na tym, że odczyty są niepoprawne, ale akutalny wyświetlacz jest niepoprawny. Jako przykład spróbować:

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

następnie spróbuj zmienić tekst wewnątrz div, aby zobaczyć co się dzieje. IE wyświetli różne wartości w zależności od tekstu w środku, podczas gdy FF wyświetli się poprawnie. IE stara się wypełnić 100px + coś w przestrzeni 100px z różnymi rezultatami.

jQuery ma dwie metody dla szerokości: .width i .outerWidth. .outerWidth zwróci pełną szerokość elementu. Posiada również możliwośc uzyskać wszystkie inne właściwości (dopełnienie, obramowanie itp) jak w przykładzie poniżej:

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

Źródło

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

że kod wykryje tryb dla Ciebie.

IE również przejdzie w tryb dziwactwa, jeśli WSZYSTKO, ale doctype znajduje się w pierwszym wierszu. Nawet pusty pierwszy wiersz z doctype na drugiej linii spowoduje tryb dziwactwa.

Źródło

2008-10-21 12:49:17

Szerokość elementu rozliczającego tryb dziwactwa w javascript?

Odpowiedz

Powiązane problemy