Ancho de un elemento que representa el modo peculiar en javascript?

He estado escaneando todas las bibliotecas populares de js, pero no puedo encontrar una que tenga una función de ancho para un elemento DOM que realmente represente el modo peculiar en Internet Explorer. El problema es que el relleno y los bordes no se cuentan en el ancho cuando se activa el modo peculiar. Por lo que puedo decir, esto sucede cuando el tipo de documento se deja fuera o el tipo de documento está configurado en html 3.2.Ancho de un elemento que representa el modo peculiar en javascript?

Obviamente, podría simplemente configurar el doctype para que cumpla con los estándares, pero este script puede estar incrustado en cualquier lugar, por lo que no tengo control sobre el doctype.

dividir el problema en partes más pequeñas:

1) ¿Cómo se detecta el modo de caprichos? 2) ¿Cuál es la mejor manera de extraer el borde y el relleno de un elemento para compensar?

Ejemplo con prototipo:

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

resultado:

253 (ff) 250 (IE)

Gracias de antemano!

Fuente

2008-10-21 christoff

@ 1

document.compatMode

"CSS1Compat" significa "modo normas" y "BackCompat" significa "modo peculiaridades".

@ 2

propiedad offsetWidth de un elementos HTML da su anchura en la pantalla, en píxeles.

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

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

Una función que compensa la anchura para IE quirksmode tiene que comprobar para el modo de procesamiento a continuación, añadir bordes y el relleno a la anchura;

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

}

Ahora hay dos formas de usarlo:

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

Fuente

2008-10-21 13:34:45 pawel

¿de dónde viene el atributo currentStyle viene? Lo intento en ff y parece no estar definido – christoff

currentStyle es la versión de IE de getComputedStyle(). Devuelve el valor real de una propiedad de CSS determinada. Puede leer más en el artículo de PPK: http://www.quirksmode.org/dom/getstyles.html – pawel

Con Prototype, también puede usar Element.getStyle(). –

La biblioteca probablemente dice la verdad. El problema no es que las lecturas sean incongruentes, sino que la visualización acutal es incoherente. Como ejemplo, pruebe:

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

luego intente cambiar el texto dentro del div para ver qué está sucediendo. IE mostrará varios valores dependiendo del texto dentro mientras FF se mostrará correctamente. IE está tratando de llenar un 100px + algo en un espacio de 100 px con varios resultados.

jQuery tiene dos métodos para width: .width y .outerWidth. .outerWidth devolverá el ancho completo del elemento. También tiene la posibilidad de obtener todas las otras propiedades (acolchado, etc. frontera) como en el ejemplo que sigue:

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

Fuente

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

ese código detectará el modo para usted.

IE también se lanzará al modo peculiar si CUALQUIER COSA pero doctype está en la primera línea. Incluso una primera línea en blanco con doctype en la segunda línea provocará el modo peculiar.

Fuente

2008-10-21 12:49:17

Ancho de un elemento que representa el modo peculiar en javascript?

Respuesta

Cuestiones relacionadas