Largeur d'un élément représentant le mode quirks en javascript?

J'ai parcouru toutes les bibliothèques js populaires, mais je ne peux pas en trouver une qui a une fonction de largeur pour un élément DOM qui prend en compte le mode quirks dans Internet Explorer. Le problème est que le remplissage et les bordures ne sont pas comptabilisés dans la largeur lorsque le mode quirks est activé. Autant que je sache, cela arrive quand le doctype est omis ou que le doctype est défini sur html 3.2.Largeur d'un élément représentant le mode quirks en javascript?

De toute évidence, je pouvais simplement définir le doctype sur quelque chose conforme aux normes, mais ce script peut être intégré n'importe où, donc je n'ai pas de contrôle sur le doctype.

Pour décomposer le problème en parties plus petites:

1) Comment détectez-vous mode bizarreries? 2) Quelle est la meilleure façon d'extraire la bordure et le rembourrage d'un élément pour compenser?

Exemple avec prototype:

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

Résultat:

253 (ff) 250 (par exemple)

Merci à l'avance!

Source

2008-10-21 christoff

@ 1

document.compatMode

"CSS1Compat" signifie "le mode normes" et "BackCompat" signifie "mode bizarreries".

@ 2

propriété offsetWidth d'un élément HTML donne sa largeur sur l'écran, en pixels.

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

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

Une fonction qui compense la largeur pour IE quirksmode doit vérifier le mode de rendu ensuite ajouter des bordures et le rembourrage à la largeur;

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

}

Maintenant, il y a deux façons de l'utiliser:

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

Source

2008-10-21 13:34:45 pawel

où provient l'attribut currentStyle de? Je l'essaie en ff et il semble être indéfini – christoff

currentStyle est la version d'IE de getComputedStyle(). Il renvoie la valeur réelle de la propriété CSS donnée. Vous pouvez en lire plus dans l'article de PPK: http://www.quirksmode.org/dom/getstyles.html – pawel

Avec Prototype, vous pouvez également utiliser Element.getStyle(). –

La bibliothèque indique probablement le vrai. Le problème n'est pas que les lectures sont incorect mais que l'affichage acutal est incorect. Par exemple, essayez:

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

puis essayez de changer le texte à l'intérieur de la div pour voir ce qui se passe. IE affichera différentes valeurs en fonction du texte à l'intérieur tandis que FF s'affichera correctement. IE essaie de remplir un objet 100px + dans un espace de 100px avec des résultats variés. JQuery a deux méthodes pour largeur: .width et .outerWidth. .outerWidth retournera toute la largeur de l'élément. Il a également la possibilité d'obtenir toutes les autres propriétés (padding, border, etc.) comme dans l'exemple ci-dessous:

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

Source

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

ce code détecte le mode pour vous.

IE sera également jeter dans le mode quirks si RIEN, mais doctype est sur la première ligne. Même une première ligne vide avec doctype sur la deuxième ligne provoquera le mode quirks.

Source

2008-10-21 12:49:17

Largeur d'un élément représentant le mode quirks en javascript?

Répondre

Questions connexes